本文摘自PHP中文网,作者V,侵删。
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。
1、插入纯字符
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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>
<h 1 > 1 、插入纯字符</h 1 >
<div class= "content only-text" ></div>
</body>
|
(推荐教程:CSS入门教程)
2、插入图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < 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、插入元素属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < 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、插入当前元素编号(即当前元素索引)
阅读剩余部分
相关阅读 >>
css如何让字竖着写
css align-content属性怎么用
css使图片居中的方法有哪些
css counter-increment属性怎么用
css如何设置行间距
纯css+div隐藏滚动条的实现方法(代码示例)
css中font-style定义字体倾斜体样式的代码示例
深入探究css box-decoration-break属性
外部调用css不显示怎么办
js怎么替换css样式
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中的content属性该如何使用