详解CSS3中新增的内容属性：content

1. 用法：

content属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面。

2. 基本语法：

content: normal | string | attr() | uri() | counter()

说明：

normal ： 默认值。

string ： 查入文本的内容，一般是一个字符串。

attr() ： 插入元素的属性值，语法：attr(attribute)。

uri() ： 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。

counter() ： 计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号，语法：content:couter(计数器名，编号种类)

其他属性值：

none    设置Content，如果指定成Nothing。 

open-quote  设置Content是开口引号

close-quote 设置Content是闭合引号

no-open-quote   如果指定，移除内容的开始引号

no-close-quote  如果指定，移除内容的闭合引号

inherit 指定的content属性的值，应该从父元素继承

3. 浏览器支持：

所有浏览器都支持 content 属性。

但是： IE8只有指定!DOCTYPE才支持Content属性。

示例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>content</title>
    <style>

        div.content1:before{  /*添加内容*/
            content: "有个人";
            font-weight: blod;
            font-size: 35px;
            padding: 10%;
            color: firebrick;
            text-shadow: 5px -5px 3px #00f;
        }
        div.content1:after{
            content: url(./1.jpg);
        }

        div.content2 h3:before{  /*插入项目编码*/
            content: "第"counter(number)"点、";
        }
        div.content2 h3{
            counter-increment: number;
        }

        div.content3 h3:before{  /*插入小写罗马的项目编码*/
            content:counter(number2,lower-roman);
        }
        div.content3 h3{
            counter-increment: number2;
        }

        div.content3 h2:before{ /*插入嵌套符号*/
            content: open-quote;
        }
        div.content3 h2:after{
            content: close-quote;
        }
         div.content3 h2{
            quotes: "<<"">>"
        }

    </style>
    </head>
    <body>

    <div class="content1">
        <div class="list">
            <p class="text">
                高跟鞋绷着脚尖  带着假面穿过城市   孤独也很光鲜 <br>
                只怕还有眼泪被人发觉会狼狈 优雅的说再见  就像蝴蝶 孤单盘旋<br>
                不是我笨 只是过程   会一直等 等不到的人 只是 想要有个人陪<br>
                想要有个人分享天黑 醒来后才发觉 已是空荡荡的房间<br>
                只是 想要有个人陪  无所谓哪怕只一瞬间 假装都无所谓<br>
            </p> 
        </div>
    </div>

    <div class="content2">
        <h3>反派</h3>
        <p>
            为何在烈阳下会感到严寒
            空气中的氧份也缺一点钙
            用心栽的花瓣 却枯萎得太快
            铺设浪漫却演化成伤害
        </p>
        <h3>作曲：幂雅/徐贤力</h3>
        <h3>演唱：幂雅/李子陶</h3>
    </div>

    <div class="content3">
        <h3>反派2</h3>
        <p>
            我的时间为何总是慢一拍
            我们专属桥段颜色是灰暗
            每当视线睁开
            你的世界有他牵绊
        </p>
        <h3>作曲：幂雅</h3>
        <h3>演唱：幂雅</h3>
    </div>

    <div class="content3">
        <h2>歌曲</h2>
    </div>

    </body>
    </html>

效果：


更多推荐

详解CSS3中新增的内容属性：content