你对 CSS 内容属性了解多少？

Content 属性确实非常熟悉。或许很多童鞋和我一样，在清空浮动时第一次遇到：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
复制代码

如上所示，content 属性与 :before 和 :after 伪元素一起使用。并且可以接受字符串作为值。

但是，除了字符串之外，还可以接受哪些值呢？

定义和用法

content 属性用于添加使用 :before 和 :after 伪元素创建的内容。

此属性指定放置在元素之前或之后的生成内容。默认值是文本的内部内容，但可以使用显示属性进行控制。

参考：w3school

可能值

none、normal、inherit、string、url()、attr()、[no-]开引号、[no-]闭引号、counterSpread Shrink

普通属性和继承属性都与大多数属性相似，因此未显示。

字符串

字符串很常见，上面去除浮动的例子就是其中之一。使用

url()

url 属性有点类似于背景属性，可以接受图像 URL。不同的是content属性不能控制图片的大小。

<div class="logo">Google</div>

.logo:before{
    content: url(https://codeqd.com/zb_users/upload/2023/09/googlelogo_color_272x92dp.png);
}
复制代码

显示示例

attr

attr，顾名思义，就是将content的内容设置为对应元素的属性。

<p>
    <span data-text='半'>半</span>
    <span data-text='边'>边</span>
    <span data-text='效'>效</span>
    <span data-text='果'>果</span>
</p>

span{
    font-size: 100px;
    font-weight: bold;
    position: relative;
    color: #000;
}
span:before{
    content: attr(data-text);
    color: #F00;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
}

复制代码

显示示例效果

quote·引号

[no-]openquote、[no-]bracketquote，这四个值常用于在元素前后添加引号，与引号属性。

<p>鲁迅曾经说过: <span>能用CSS解决的问题就不要使用JS。<span>呵呵，谁说的？<span class="no-quote">呵呵，谁说的？</span></span></span></p>

span {
    quotes: '“' '”' '‘' '’' '"' '"';
}
span:before { 
    content: open-quote;
}
span:after {
    content: close-quote;
}
.no-quote:after{
    content: no-close-quote;
}
复制代码

其中quotes 属性指定要使用的引号。成对出现时，前两个值定义第一层引用嵌套，最后两个值定义下一层引用嵌套。等等。

需要注意的是，只有当伪元素: before 将内容的值设置为左引号时才有效。

参见示例

CounterSpread收缩·计数器

这是一个非常强大的东西，不妨先体验一下它的强大力量，参见示例

它还与计数器重置，计数器递增两个属性一起使用。

计数器复位

用于识别计数器的范围。该值包含两部分：第一部分是计数器的名称；第二部分是计数器的起始值，默认为 0。此外，重置计数器可以同时向多个计数器发出信号。

counter-reset: n 0
counter-reset: n 2 
counter-reset: n 0 m 0 p 0
复制代码

计数器增量

用于指示计数器实际使用的区域。该值包含两部分：第一部分是计数器的名称；第二部分是添加计数器。值，默认值为1。例如：

counter-increment: n 2
counter-increment: n -1 /*递减*/
复制代码

counter和counter有什么区别？

counter()

counter方法可以接收两个参数。第一个是所需的计数器名称；第二种是计数器样式，它是列表样式类型。它支持的关键字值是列表样式类型支持的关键字值，例如disk |圆 |正方形等。

content: counter(n)

content: counter(m, circle)
复制代码

counters()

counters方法主要用于嵌套计数，可以接受三个参数。第一个是所需的计数器名称；第二个是字符串，用于嵌套枚举的分隔符，例如“.”第 1.1 节；第三个参数是计数器样式，与counter相同。其中前两个参数是必填的

content: counters(n, '-');
复制代码

我们看一个例子

作者：TDGarden
链接：https://juejin.im/post/5be25553f265da611b57d2ee：版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。