CSS Content 属性

content 属性，用在after,before伪元素上，用于在选中的元素前后插入内容。

插入的内容多种多样，

• 纯文字

h1::after{
content:"h1后插入内容"
}

• 文字符号
  
  关于 quotes ,参考CSS quotes 属性

h1{
    quotes:"(" ")";
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

• 图片

h3::after{
    content:url(xxx/new.gif)
}

• 元素属性

a:after{
    content:attr(href);
}

• 编号
  
  这里抄一段张大神的代码，CSS计数器内嵌demo,
  
  编号这里会牵涉到一些属性
  • counter-reset
  • counter-increment
  • counter/counters
    
    当然不用担心，张大神的 css counter计数器给了很详细的解答

<style>
.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; font-family: arial black; }
</style>
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>

• 图标
  
  这里的图标不是说图片，是画出来的一些图标, 播放图标demo

<style>
body{
  background-color:#000
}
.focus__play {
    position: relative;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border: .1rem solid;
    border-radius: 999px;
}
.c_ico1 {
    color: #fff;
}
.focus__play:before {
    content: "";
    position: absolute;
    top: .5rem;
    left: .65rem;
    height: 0;
    border-color: transparent transparent transparent currentColor;
    border-width: .45rem .75rem;
    border-style: solid;
}
</style>
<div class="inlineblock operation">
  <a class="focus__play c_ico1 js_playallsong">
    <span data-v-c9f6f162="" class="focus__play_text"></span>
  </a>
 </div>

CSS3的content属性详解

css counter计数器

CSS content换行技术实现字符animation loading效果

CSS计数器+伪类实现数值动态计算与呈现

ASCII码对照表

CSS quotes 属性

HTML <q> 标签