CSS3的content属性详解及CSS中content使⽤字体图标
  CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有⼀个content属性，能够实现页⾯中的内容插⼊。
  content属性⼀般⽤于::before、::after伪元素中，⽤于呈现伪元素的内容。平时content属性值我们⽤的最多的就是给个纯字符，其实它还有很多值可供选择。
1、插⼊纯⽂字：content: '插⼊纯字符';
2、插⼊图⽚：content: url('**.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">菜鸟教程</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，可⽤值见： www.w3school/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">cssclass属性
<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之前必须有空格，不然显⽰不正确。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。