CSS Content 属性

最新推荐文章于 2024-08-17 23:52:49 发布

转载最新推荐文章于 2024-08-17 23:52:49 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cloud-/p/7484725.html

本文详细介绍了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>