详解css中的content属性的用法

前端  /  管理员 发布于 7年前   224

content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。

用法详解

1、插入纯字符

b411779f5eb62802b356b5422b000c6.png

<style>    *{margin: 0;padding: 0;box-sizing: border-box;}    li{list-style: none;}    .content{        position: relative;padding: 10px;        border: 1px solid #666;margin: 10px;    }    .content.only-text::before{        content: '插入纯字符';    }</style><body>    <h1>1、插入纯字符</h1>    <div class="content only-text"></div></body>

（视频教程推荐：css视频教程）

2、插入图片

d1793eb96b09fd822fee15de0f726fc.png

<style>    *{margin: 0;padding: 0;box-sizing: border-box;}    li{list-style: none;}    .content{        position: relative;padding: 10px;        border: 1px solid #666;margin: 10px;    }    .content.fill-image::before{        content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');    }</style><body>    <h1>2、插入图片</h1>    <div class="content fill-image"></div></body>

3、插入元素属性

afdeba2c2aec36e1b243a042222f1d5.png

<style>    *{margin: 0;padding: 0;box-sizing: border-box;}    li{list-style: none;}    .content{        position: relative;padding: 10px;        border: 1px solid #666;margin: 10px;    }    .content.fill-dom-attr::before{        content: attr(data-title);    }</style><body>    <h1>3、插入元素属性</h1>    <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div></body>

4、插入当前元素编号(即当前元素索引)

这个特性可用于活动页面的规则介绍。

744a9452e859109a545201c97fe5860.png

<style>    *{margin: 0;padding: 0;box-sizing: border-box;}    li{list-style: none;}    .content{        position: relative;padding: 10px;        border: 1px solid #666;margin: 10px;    }    .fill-dom-index li{        position: relative;        /* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */        counter-increment: my;    }    .fill-dom-index li div::before{        /* 使用指定名字的计算器 */        content: counter(my)'- ';        color: #f00;        font-weight: 600;    }</style><body>    <h1>4、插入当前元素编号(即当前元素索引)</h1>    <div class="content fill-dom-index">        <ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li>        </ul>    </div></body>

5、插入当前元素编号(指定种类)

4b77fc67b4ea9da8aa432e1dbba66ce.png

<style>    *{margin: 0;padding: 0;box-sizing: border-box;}    li{list-style: none;}    .content{        position: relative;padding: 10px;        border: 1px solid #666;margin: 10px;    }    .fill-dom-index2 li{        position: relative;        counter-increment: my2;    }    .fill-dom-index2 li div::before{        /* 第二个参数为list-style-type，可用值见： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/        content: counter(my2,lower-latin)'- ';        color: #f00;        font-weight: 600;    }</style><body>    <h1>5、插入当前元素编号(指定种类)</h1>    <div class="content fill-dom-index2">        <ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li>        </ul>    </div></body>

推荐教程：css快速入门

以上就是详解css中的content属性的用法的详细内容，更多请关注其它相关文章！


  • 上一条：
    js中常用的输出方式有哪些
    下一条：
    js作用域和闭包详解

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客