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> 标签