详解CSS content的使用机制，原来还可以这样用！

了解CSS content

在前端开发中，我们经常需要将某些内容添加到页面上，CSS提供的content属性可以很好的实现这个功能。content属性通常用于实现CSS伪元素的内容，可以在HTML中插入一些不是HTML标记的内容，比如图标、自定义字符串、属性等。

在CSS样式表中设置content属性很简单，在伪元素(:before、:after、:first-line、:first-letter)中，通过设置content属性的值来插入相关内容。

 

.selector::before {
    content: "★";
}
.selector::after {
    content: " (new)";
}

上述代码中，通过设置::before伪元素的content属性，把★添加到元素的之前。在::after伪元素中，content属性的值包含一个空格和文字(new)，在元素之后添加这些内容。

content属性的使用方法

content属性是一个很强大的属性，可以用来插入各种内容，比如图标、计数器、自动编号等。下面将详细介绍content属性的使用方法。

插入图标

使用content属性可以将任何内容添加到HTML中，其中一种常见的使用方法是插入图标。例如，我们希望在页面中插入了一个向下的图标。

 

.down-arrow::before {
    content: "\2193";
}

在上述代码中，\2193代表向下箭头图标的Unicode值。

插入自动编号

在CSS中，我们可以使用counter-increment和counter-reset属性来自定义自动编号。使用content属性可以将自动编号插入到HTML中。

 

ol {
    counter-reset: li;
}
li:before {
    content: counter(li) ". ";
    counter-increment: li;
}

上述代码将为所有列表项添加编号。

counter(li)根据li计数器的值生成自动编号，". "是文本内容，把自动编号和文本连接起来。 counter-increment: li;会将计数器li+1，使下一个编号能够自动生成。

插入属性值

有时，我们需要将元素的某个属性值插入到HTML中。使用属性选择器和content属性可以实现这个功能。

 

.selector::before {
    content: attr(title);
}

上述代码将把.title元素的title属性值插入到.selector元素的之前。

content属性的实际应用

content属性提供了一种灵活的方式来在HTML中添加样式，这种方式在很多情况下都非常有用。

使用content属性实现响应式布局

content属性可以与CSS calc()函数配合使用，实现响应式布局。计算出视窗大小减去一定的宽度，然后使用content属性把它们插入到页面的某个地方。

 

.container::before {
    content: "";
    width: calc(100% - 20px);
    display: block;
}

上述代码将在容器的之前插入一个宽度为视窗宽度减去20像素的块级元素。

使用content属性实现图片的缩放

使用content属性可以为网页添加缩放效果。例如，我们希望当鼠标悬停在图片上时，图片缩小到原来的50%。

 

img:hover::before {
    content: "";
    width: 50%;
    height: 50%;
    position: absolute;
    background-image: url("img.jpg");
    background-size: cover;
    z-index: -1;
}

上述代码中，使用:before伪元素和content属性创建了一个背景图片，使用:hover伪类选择器实现鼠标悬浮时的效果。使用z-index属性使得背景图片在<div> 背景图片之后。

总结

content属性是CSS中的一个强大的属性，可用于插入内容，包括任何文本、图像或计数器的值。

在使用content属性时，需要了解好其工作机制，并了解各种可用的值和如何正确应用。

在您的下一个项目中，尝试使用content属性实现不同的功能，提高您的前端CSS编码技能。