CSS3的content属性详解及CSS中content使用字体图标
2023-09-11 14:19:56 时间
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。
1、插入纯文字:content: '插入纯字符';
2、插入图片:content: url('http://**.png');
3、插入元素属性:
<h1>3、插入元素属性</h1>
<div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>
.content.fill-dom-attr::before{
content: attr(data-title);
}
<p><a href="//www.runoob.com">菜鸟教程</a> - 免费的编程学习网站。</p>
a:after {content: " (" attr(href) ")";}
4、插入当前元素编号(即当前元素索引)
<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、插入当前元素编号(指定种类)
<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>
6、CSS中content使用字体图标,比如iconfont
目前字体图标使用最广泛的是阿里巴巴的iconfont(具体使用请自行百度),然后找到我们需要的字体图标,点击编译图标,
这个Unicode(16进制)的符号是我们需要的:
其中content:“”中\e667之前必须有空格,不然显示不正确。
相关文章
- [转] css3变形属性transform
- DOM中元素节点、属性节点、文本节点的理解13.3
- css3 box-sizing 属性
- 前端基础 -JQuery之 属性过滤选择器
- JavaScript - 二维对象数组去重(根据某一属性)
- CSS3选择器示例大全(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)
- 图解css3:核心技术与案例实战. 1.2 浏览器对CSS3的支持状况
- 图解css3:核心技术与案例实战. 3.1 CSS3边框简介
- CSS3属性选择器,伪元素,伪类,伪元素清除浮动(微重点)
- HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性
- Android UI系列-----ImageView的scaleType属性
- Qt编写控件属性设计器6-动态属性
- javascript 设置input框只读属性 获取disabled后的值并传给后台
- html中offsetTop、clientTop、scrollTop、offsetTop各属性
- 分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset
- [js高手之路] dom常用节点属性兼容性详解与应用
- 内联 Style 简写属性的发现
- matplotlib 在绘制棉棒图时,进行设置属性
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
- CSS3属性之 target伪类实现Tab切换效果