CSS：before and：after 使用

CSS:before和:after属性是被称为pseudo元素的。它们用于在元素的内容之前或之后添加内容。这些pseudo元素有很多用途，我们将在这里探索其中的一些用法。

语法

如果我们有这样的元素:

我们可以在使用CSS之前添加一个pseudo元素，比如:

h2:before{

content: “Hello“;

color:blue;

}

结果将是:

这是一个非常简单的原则。在某个元素之前或之后添加内容。在添加图标、清除浮动以及在许多其他情况下，它可能非常有用。pseudo元素的内容属性可以用空引号括起来:“”。这样，您就可以将pseudo元素当作一个没有内容的框。如果内容属性完全删除，pseudo元素将不起作用。

添加图标

在pseudo元素之前和之后最流行的用法可能是使用它们来添加图标。让我们看一下标记。

HTML:

Weather report

CSS:

h2:before{

content: “ ”;

display:block;

height:15px;

width:25px;

url: (‘images/icon.png’’);

margin-right:5px;

}

结果将是:

现在我们已经成功地在文本前面添加了一个图标。容易,对吧?

Clearing Floats

在浮动元素之后，需要添加另一个元素以清除浮动。您可以通过使用pseudo one来避免添加新元素。

假设我们有这样的情况:

我们可以使用下面的代码来清除浮动。

HTML:

Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.

CSS:

.box-container:before,

.box-container:after{

content:"";

display:block;

}

.box-container:after{

clear:both;

}

.box{

height:100px;

width:100px;

background-color:#C98EED;

margin:5px;

float:left;

}

现在，让我们看一下结果

通过使用此方法，我们将清除浮动，并将段落移动到两个元素之下。

使用背景图像

我们还可以向pseudo元素添加背景图像。这在设计标题时通常使用。

HTML:

Hello World

CSS:

h2:after{

content: “”;

width:100%;

height:30px;

background:url(‘underline.png’)centercenterno-repeat;

display:block;

}

结果实现了:

浏览器支持

与CSS中的其他内容一样，需要检查浏览器支持。通过咨询我可以使用的服务，我们发现这些伪类具有很高的浏览器支持(超过98%)，并且在使用它们时我们不会感到头痛。

总结

这里，我们解释了CSS伪元素的基本原理。这些例子说明了一些可能的用法。如果一开始还不完全清楚，不要担心，做点小练习吧。

希望本文将有助于你项目。感谢您的阅读!