CSS Content 属性

小编 2026-06-05 阅读:903 评论:0

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

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>