SOURCE

<h2>content: normal 测试</h2>
<div class="content content-1">
    <p class="p-1">这是设置了内容的伪元素::before{content: "引用文字"}</p>
    <p class="p-2">这是设置了伪元素::before{content: normal}</p>
</div>

<h2>content: none 测试</h2>
<div class="content content-2">
    <p class="p-1">这是设置了内容的伪元素::before{content: "引用文字"}</p>
    <p class="p-2">这是设置了伪元素::before{content: none}</p>
</div>

<h2>使用计数器属性content:counter(myIndex);结合counter-increment: myIndex; 属性设置带序号段落，类似ol有序列表效果</h2>
<div class="content content-3">
    <p class="p-1">带序号的段落文字</p>
    <p class="p-2">带序号的段落文字</p>
    <p class="p-3">带序号的段落文字</p>
    <p class="p-4">带序号的段落文字</p>
    <p class="p-5">带序号的段落文字</p>
</div>

<h2>使用自定义content:"•";实现类似ul无序列表效果</h2>
<div class="content content-3-1">
    <p class="p-1">带圆点无序段落文字</p>
    <p class="p-2">带圆点无序段落文字</p>
    <p class="p-3">带圆点无序段落文字</p>
    <p class="p-4">带圆点无序段落文字</p>
    <p class="p-5">带圆点无序段落文字</p>
</div>

<h2>content: attr();测试</h2>
<div class="content content-4">
    <p class="p-1"><a href="http://www.baidu.com" target="_blank">设置一个href属性作为 content:attr值：</a></p>
    <p class="p-2" rel="额外的rel值">段落文字2后边跟这rel值：</p>
    <p class="p-3" data-text="额外的自定义属性data-text">段落文字3</p>
    <p class="p-4" data-text="额外的自定义属性data-text">段落文字4</p>
    <p class="p-5" data-text="data-text放到前边——" data-val="——data-val放到后边">段落文字5</p>
</div>


<h2>使用属性content:open-quote，和 content:close-quote属性设置带引号的段落</h2>
<div class="content content-5">
    <p class="p-1">带序号的段落文字</p>
    <p class="p-2">
        这里是一段话<span>用span分开可以插入单引号</span>，<span>是因为在设置 open-quote的时候没有设置 close-quote</span>，就直接有设置一个 open-quote
    </p>
    <p class="p-3">如果只设置close-quote 会怎样，并不生效，因为如果设置 close-quote 必须要先设置 open-quote 才起作用</p>
    <p class="p-4">只设置打开引号open-quote</p>
</div>

<h2>使用属性content:no-open-quote，和 content:no-close-quote属性设置带引号的段落</h2>
<div class="content content-6">
    <p class="p-1">当前段落设置::before{content: open-quote;}，并且设置::after{content: no-close-quote;}</p>
    <p class="p-2">由于上一个段落设置了no-close-quote，这一段落在设置open-quote将从新开始</p>
    <p class="p-3">这一段落设置open-quote但是他会以单引号开始，因为上一个段落的open-quote并没结束</p>
    <p class="p-4">这个段落设置了close-open是以上一个的单引号进行结束</p>
    <p class="p-5">这个段落设置了close-open是以上一个的上一个双引号进行结束</p>
    <p class="p-6">这个段落可以单独设置close-open双引号进行结束，因为他设置了一个no-open-quote属性</p>
</div>

<h2>使用属性content: url();插入图片</h2>
<div class="content content-7">
    <p class="p-1">这个段落使用content: url();插入图片</p>
</div>

.content{
    margin: 20px; 
    border-bottom: 1px solid #00c;
    padding: 10px 0;
}

.content-1 p::before{
    content: "引用文字:";
    color:#c00;
}
.content-1 p.p-2::before{
    content: normal;
}


.content-2 p::before{
    content: "引用文字:";
    color:#c00;
}
.content-2 p.p-2::before{
    content: none;
}
.content-3 p{
    counter-increment: myIndex;
}
.content-3 p::before{
    content: counter(myIndex);
    color:#00c;
    font-size: 18px;
    margin-right: 5px;
}

.content-3-1 p::before{
    content: "•";
    color:#00c;
    font-size: 18px;
    margin-right: 5px;
}

.content-4 .p-1 a{
    text-decoration: none;
}
.content-4 .p-1 a::after{
    content: attr(href);
    color: #c00;
}

.content-4 .p-2::after{
    content: attr(rel);
    color: #00c;
}
.content-4 .p-3::after{
    content: attr(data-text);
    color: #00c;
    margin-left: 10px;
}
.content-4 .p-4::before{
    content: attr(data-text);
    color: #00c;
    margin-right: 10px;
}
.content-4 .p-5::before{
    content: attr(data-text);
    color: #00c;
    margin-right: 10px;
}
.content-4 .p-5::after{
    content: attr(data-val);
    color: #00c;
    margin-left: 10px;
}


.content-5 .p-1::before{
    content: open-quote;
}
.content-5 .p-1::after{
    content: close-quote;
}
.content-5 .p-2::before{
    content: open-quote;
}
.content-5 .p-2 span::before{
    content: open-quote;
}
.content-5 .p-2 span::after{
    content: close-quote;
}
.content-5 .p-2 span::after{
    content: close-quote;
}
.content-5 .p-2::after{
    content: close-quote;
}

.content-5 .p-3::after{
    content: close-quote;
}
.content-5 .p-4::before{
    content: open-quote;
}
.content-5 .p-4::after{
    content: no-close-quote;
}

.content-6 .p-1::before{
    content: open-quote;
}
.content-6 .p-1::after{
    content: no-close-quote;
}

.content-6 .p-2::before{
    content: open-quote;
}
.content-6 .p-3::before{
    content: open-quote;
}

.content-6 .p-4::after{
    content: close-quote;
}
.content-6 .p-5::after{
    content: close-quote;
}
.content-6 .p-6::before{
    content: no-open-quote;
}
.content-6 .p-6::after{
    content: close-quote;
}

.content-7 .p-1::before{
    content: url(https://aimg8.dlszyht.net.cn/module/simplepicbackground/929460/465/5a362adba2566.jpg);
    width: 100px;
    height: 100px;
    display: inline-block;
}
.content-7 .p-1::after{
    content: url(https://aimg8.dlszyht.net.cn/module/simplepicbackground/929460/465/5a362adba2566.jpg)
}