前言

本文解说CSS中应用频率并不高的content属性，通过多个实用的案例，带你由浅入深的把握content的用法，让代码变得更加简洁、高效。

定义

W3school中这样定义：

content 属性与 :before 及 :after 伪元素配合应用，来插入生成内容。

该属性用于定义元素之前或之后搁置的生成内容。默认地，这往往是行内内容，不过该内容创立的框类型能够用属性 display 管制。

在前端日常开发中，content属性应用频率并不高，所以开发者个别对它的了解并不深刻，通常会在革除浮动、字体图标时偶然应用。上面通过各种案例，来一起看看content的妙用。

案例

1. 革除浮动

<!--css-->.left {float: left}.right {float: right}.clear:after {    content: '';    clear: both;    display: block;}<!--html--><div class="container clear">    <div class="left">左</div>    <div class="right">右</div></div>

父元素.container中两个子元素.left和.right浮动后会脱离文档流，无奈撑起容器，造成.container高度为0。应用伪元素:after革除浮动，三个属性缺一不可：

  • content: ''; 通过:after增加一个内容为空的伪元素。
  • clear: both; 伪元素:after两侧浮动革除。
  • dispaly: block; 设置块元素，因为clear只对块元素无效。

说到clear属性，应用最多的就是clear: both，left/right用的却很少，因为both曾经蕴含left/right个性，简略间接还无效。想更加深刻理解clear属性，能够看看张鑫旭大神的精确了解CSS clear:left/right的含意及理论用处。

2. 小三角的气泡窗口

<!--css-->.box {    width: 200px;    height: 100px;    border-radius: 5px;    background: #fff;    position: relative;}.box:after {    content: '';    position: absolute;    bottom: -20px;    right: 20px;    width: 0;    height: 0;    border-top: 10px solid #fff;    border-bottom: 10px solid transparent;    border-left: 10px solid transparent;    border-right: 10px solid transparent;}<!--html--><div class="box"></div>

成果：

配合伪元素:after，实现了一个右下角带倒三角指向性的气泡窗口。通过调整border各边的色彩和相对定位地位，能够绘制出指向不同的气泡窗口，只用一个div标签实现，是不是既简洁又好看。可能你会想到这是伪元素:after的成果，和content属性无关，实际上去掉content后:after是不失效的。

3. 字体图标

第一种是浏览器自带的特殊字符：

<!--css-->.music:before {    content: '\266C';    color: red;}<!--html--><span class="music">晴天-周杰伦</span>

成果：

浏览器反对很多字体图标，如：天气☀、雪花❄、三叶草☘、太极☯等等乏味的字符。参考网页HTML特殊字符编码对照表。

第二种是内部引入字体图标，如Bootstrap中的Glyphicon字体图标：

<link rel="stylesheet" href="../static/css/bootstrap.min.css"><!--html--><span class="glyphicon glyphicon-heart"></span>

成果：

这里为什么没有写CSS款式呢，因为bootstrap.min.css中曾经定义好了glyphicon-heart的款式，间接在官网上查看：

须要阐明的是，本地引入bootstrap.min.css后，还须要引入字体图标库glyphicons-halflings-regular.woff2，字体图标能力失效。

<!--bootstrap.min.css--><!--format 属性是帮忙浏览器辨认字体的-->@font-face {    font-family: 'Glyphicons Halflings';    src: url(../fonts/glyphicons-halflings-regular.eot);    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),    url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),    url(../fonts/glyphicons-halflings-regular.woff) format('woff'),    url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),    url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}

依照上述url门路，将glyphicons-halflings-regular.woff2放到如下目录构造中即可。

4. 无内容提醒

<!--css--><!--:empty为空时匹配-->div:empty:after {    content: '暂无数据';    color: red;}<!--html--><div>有内容数据</div><div></div>

成果：

当元素内容为空时，通过content内容“暂无数据”进行展现。可应用场景：后盾接口返回数据后，插入到页面DOM中，当后盾返回数据为空时，通过CSS间接提醒暂无数据，不须要应用JavaScript解决。

一个乏味的景象，content内容“暂无数据”无奈被选中，这是因为伪元素用于创立一些不在文档树中的元素，尽管用户能够看到这些文本，然而这些文本实际上不在文档树中。

5. 面包屑菜单

<!--css-->ul li {    display: inline-block;    font-weight: bold;}ul li:not(:last-child):after {    content: '\276D';    margin: 5px;}<!--html--><ul>    <li>首页</li>    <li>商品</li>    <li>详情</li></ul>

成果：

又是一个content值为特殊字符的例子，配合伪类和伪元素实现面包屑菜单。

6. 加载中...动画

<!--css-->.loading:after {    content: ".";    animation: loading 2s ease infinite;}@keyframes loading {    33% {        content: "..";    }    66% {        content: "...";    }}<!--html--><p class="loading">加载中 </p>

成果：

animation动画值含意：

  • loading：animation-name，规定须要绑定到选择器的 keyframe 名称为loading。
  • 2s：animation-duration，规定实现动画所破费的工夫2秒。
  • ease：animation-timing-function，规定动画的速度曲线，先慢中快后慢。
  • infinite：animation-iteration，规定动画应该播放的次数为有限次。

通过animation动画实现33%、66%时与content内容配合，实现动静“加载中...”的成果。

7. 插入图片

<!--css-->.loading:before {    content: url("../static/img/loading.gif");    vertical-align: middle;}<!--html--><div class="loading"> 加载中... </div>

成果：

除了插入字体图标，content还能够应用url()办法插入图片，和background属性相似能够应用url指定一个图片门路，不同的是content属性无法控制图片大小，应用条件无限。

8. attr属性内容生成

<!--css-->.web:after {    content: "（"attr(href)"）"}<!--html--><a class="web" href="https://echeverra.cn">echevera</a>

成果：

content值也能够是attr()办法，用来获取指定属性的值，可插入到指定的地位。

9. 半边特效

<!--css-->span{    font-family: sans-serif;    font-size: 30px;    font-weight: bold;    position: relative;    color: green;}span:before{    content: attr(text);    color: orange;    position: absolute;    left: 0;    top: 0;    width: 50%;    overflow: hidden;}<!--html--><span text="echeverra">echeverra</span><span text="博">博</span><span text="客">客</span>

成果：

半边特效是通过attr()办法获取text属性值，属性值与其内容雷同，奇妙的设置相对定位，只显示一半并笼罩了原文本内容，实现文字半边特效，是不是还挺炫酷的。须要留神的是有些font-family字体会有文字无奈重合的问题。

10. 文字引号

<!--css-->span {    quotes: '“' '”';}span:before {    content: open-quote;}span:after {    content: close-quote;}<!--html--><p>鲁迅说过：<span>真正的壮士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。</span></p>

成果：

利用元素的quotes属性指定双引号，应用content的open-quote属性值设置闭口引号，close-quote属性值设置闭合引号，当然quotes也能够指定其余符号。

11. 增加章节数

<!--css-->ul{    counter-reset: section;}li{    list-style-type: none;    counter-increment: section;}li:before{    content: counters(section, '-') '.';}<!--html--><ul>    <li>章节一</li>    <li>章节二        <ul>            <li>章节二一</li>            <li>章节二二</li>            <li>章节二三</li>        </ul>    </li>    <li>章节三</li>    <li>章节四</li>    <li>章节五        <ul>            <li>章节五一</li>            <li>章节五二</li>        </ul>    </li>    <li>章节六</li></ul>

成果：

这里用到了counter计数器办法，波及到counter-reset、counter-increment、counter()和counters()几个属性。

  • counter-reset用来指定计数器名称，例子中命名为section，同时能够指定计数器开始计数的数值，如指定开始计数数值为1：counter-reset: section 1;，不指定默认为0。
  • counter-increment用来指定计数器每次递增的值，如指定计数器递增值为2：counter-increment: section 2;，默认值为1，counter-increment只有指定了counter-reset，对应的计数器的值就会变动。
  • counter(name, style)用来输入计数器的值。其中name为计数器名称，style可选参数，默认为阿拉伯数字，也可指定list-style-type反对的值，如罗马数字lower-roman。
  • counters(name, strings, style)用来解决嵌套计数器，同样是输入计数器的值，和counter()不同的是多了一个strings参数，示意子序号的连贯字符串。例如1.1的string就是'.'，1-1就是'-'。

对于计数器的具体的教程，同样能够参考CSS大神张鑫旭的CSS counter计数器(content目录序号主动递增)详解。

12. 计算checkbox选中数

<!--css-->form {    counter-reset: count 0;}input[type="checkbox"]:checked {    counter-increment: count 1;}.result:after {    content: counter(count);}<!--html--><form>    <input type="checkbox" id="javaScript">    <label for="javaScript">javaScript</label>    <input type="checkbox" id="PHP">    <label for="PHP">PHP</label>    <input type="checkbox" id="Python">    <label for="Python">Python</label>    <div class="result">已选：</div></form>

成果：

奇妙使用计数器配合:checked伪类，选中计数器减少1，勾销选中减1，用CSS实现动静计数性能。

总结

总结content属性值能够为以下几种：

  • string字符串，最常见的，对应案例：革除浮动、小三角的气泡窗口、字体图标、无内容提醒、面包屑菜单、加载中...动画。
  • url()办法，对应案例：插入图片。
  • attr()办法，对应案例：attr属性内容生成、半边特效。
  • quotes引号，对应案例：文字引号。
  • counter()办法，计数器性能，对应案例：增加章节数，计算checkbox选中数。

只管应用javaScript同样能够实现上述的大部分性能，灵活性也更高，但应用CSS的益处就是能够极大地简化开发，不占用JS主线程，晋升web的性能。

其实content的案例远不止于此，在查阅相干材料的同时，我还见识到了另外一些神奇的用法，当然原理大致相同，本文的案例只是尽可能的带你理解content鲜为人知的一面，关上一个全新的世界，让你触类旁通。如果能在理论开发中使用上，那就更Nice了，心愿能对大家有所帮忙。

你学“废”了么？

文章首发于我的博客 echeverra，原创文章，转载请注明出处。

欢送关注我的微信公众号，一起学习提高！不定时会有资源和福利相送哦！