CSS伪类中的content

在伪类中的content属性可能的值

attr(X)        将 X 属性值以字符串形式返回。如果没有则返回一个空字符串
string         文本内容
open-quote     左引号
close-quote    右引号
no-open-quote  
no-close-quote 不会生产任何内容，但是会改变（增加或降低）引号层级。
url            指定一个外部资源（比如图片）
initial        它将属性设置为其默认值
inherit        继承自其父元素
none           不设置伪元素::before或::after的内容。
normal         伪类元素中会被视为 none，，默认值。如果内容属性正常，则设置内容

counter(name[,style])            计数器
counters(name[,string[,style]])  分层级计数器

一、清除浮动

父元素中子元素浮动后会脱离文档流，无法撑起容器

.left {float: left}
.right {float: right}
.clear:after {
    content: '';
    clear: both;
    display: block;
}

content: '';    添加一个内容为空的伪元素
clear: both;    伪元素:after 两侧浮动清除
dispaly: block; 设置块元素，因为clear只对块元素有效

<!--html-->
<div class="container clear">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

二、小三角的气泡窗口

配合伪元素:after，实现一个右下角带倒三角指向性的气泡窗口

通过调整border各边的颜色和绝对定位位置，可以绘制出指向不同的气泡窗口

<!--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;
}

三、无内容时的提示

当元素内容为空时，通过content进行提示，不需要使用 JavaScript 处理

content的内容无法被选中，这是因为伪元素用于创建一些不在文档树中的元素，虽然用户可以看到这些文本，但是这些文本实际上不在文档树中

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

四、面包屑菜单

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

content值为特殊字符，配合伪类和伪元素完成面包屑菜单，也可完成文字前后添加图标

五、加载动画

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

六、插入图片

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

content可以使用url()方法插入图片，和background属性类似，不同的是content属性无法控制图片大小

七、获取属性值

content值可以通过attr() 方法，用来获取指定属性的值

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

八、计数器

通常要实现一个动态的递增数，都是通过js实现，而现在可以通过CSS中的计数器实现递增数

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数

使用步骤：

1、counter-reset定义计数器名称及初始值，默认为0
    counter-reset: name;
        /* 定义计数器name并设置其值为默认值 0 */
    counter-reset: name 2;
        /* 定义计数器name并设置其值为 2  */
    counter-reset: name1 2 name2 1;
        /* 同时定义name1和name2两个计数器  */

2、counter-increment定义指定计数器的每次递增数，默认为1
    counter-increment：name 2;
        /* 定义计数器name每次计数递增 2 */

3、counter()或counters()函数来显示在页面上
    content:counter(name,upper-roman)
        /* 显示内容并设置显示格式为大写罗马数字 */

counter(name[,style])

其中style表示计数器的显示格式，和list-style-type属性的可选值相同，可选值

disc                 ：实心圆点
circle               ：空心圆点
square               ：实心方块
decimal              ：十进制阿拉伯数字，默认值
decimal-leading-zero ：有前导零的2位十进制
lower-roman          ：小写罗马数字
upper-roman          ：大写罗马数字
lower-greek          ：小写希腊语
lower-latin          ：小写拉丁语(英文字母)
upper-latin          ：大写拉丁语(英文字母)
armenian             ：亚美尼亚
georgian             ：格鲁吉亚
none                 ：不显示标记

应用示例

<style>
.page-list {
  counter-reset: counter;
}
.page-list p:before {
  padding: 2px 5px;
  border: 1px solid  #ccc;
  counter-increment: counter;
  content: counter(counter);
}
</style>
<div class="page-list">
    <p>一</p>
    <p>二</p>
    <p>三</p>
</div>

九、分层计数器

counters()对嵌套的计数器非常有用，可以在不同级别的嵌套计数器之间插入字符串

目前仅能识别ol-li或ul-li列表

counters(name[,string[,style]])：string为分层时各层级间的分割字符

<style>
.list {
  counter-reset: jishu;
  list-style-type: none;
}
.list li:before {
  counter-increment: jishu;
  content: counters(jishu, "-") "：";
}
</style>

<ul class="list">
    <li>item</li>
    <li>item
        <ul class="list">
            <li>item</li>
            <li>item</li>
            <li>item
                <ul class="list">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
            <li>item</li>
        </ul>
    </li>
    <li>item</li>
</ul>