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> 標簽