CSS-content

CSS中的content属性

常见用法

/* 清除浮动 */
.clearfix::after {
   content:""; 
   display: block; 
   clear:both; 
}

/* 伪元素制作三角形 */
.triangle::after {
    position: absolute;
    content: "";
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid #f00;
}

定义

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

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

字体图标

.music::before {
    content: '\266C';
    color: red;
}

<span class="music">晴天-周杰伦</span>

无内容提示

div:empty::after {
    content: '暂无数据';
    color: red;
}

<div>有内容数据</div>
<div></div>

面包屑分隔符

ul li {
    display: inline-block;
    font-weight: bold;
}
 
ul li:not(:last-child)::after {
    content: '\276D';
    margin: 5px;
}

<ul>
    <li>首页</li>
    <li>商品</li>
    <li>详情</li>
</ul>

加载动画

.loading::after {
    content: ".";
    animation: loading 2s ease infinite;
}
 
@keyframes loading {
    33% {
        content: "..";
    }
    66% {
        content: "...";
    }
}

<p class="loading">Loading</p>

插入图片

/* 使用url()方法插入图片 */
.loading::before {
    content: url("../path/to/loading.gif");
    vertical-align: middle;
}

<div class="loading">加载中...</div>

attr属性内容生成

.web:after {
    content: "（"attr(href)"）"
}

<a class="web" href="https://domain.com">domain</a>

半边特效

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

<span text="domain">domain</span>
<span text="博">博</span>
<span text="客">客</span>

文字引号

span {
    quotes: '“' '”';
}
span:before {
    content: open-quote;
}
span:after {
    content: close-quote;
}

<p>鲁迅说过：<span>真正的勇士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。</span></p>

添加章节数

ul{
    counter-reset: section;
}
li{
    list-style-type: none;
    counter-increment: section;
}
li:before{
    content: counters(section, '-') '.';
}

<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-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 counter计数器(content目录序号自动递增)详解

计算checkbox选中数

form {
    counter-reset: count 0;
}
 
input[type="checkbox"]:checked {
    counter-increment: count 1;
}
 
.result:after {
    content: counter(count);
}

<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实现动态计数功能

总结

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