CSS:before和:after属性是被称为pseudo元素的。它们用于在元素的内容之前或之后添加内容。这些pseudo元素有很多用途,我们将在这里探索其中的一些用法。
如果我们有这样的元素:
<h2>welcome to our website</h2>
我们可以在使用CSS之前添加一个pseudo元素,比如:
h2:before {
content: “Hello“;
color : blue;
}
结果将是:
这是一个非常简单的原则。在某个元素之前或之后添加内容。在添加图标、清除浮动以及在许多其他情况下,它可能非常有用。pseudo元素的内容属性可以用空引号括起来:“”。这样,您就可以将pseudo元素当作一个没有内容的框。如果内容属性完全删除,pseudo元素将不起作用。
在pseudo元素之前和之后最流行的用法可能是使用它们来添加图标。让我们看一下标记。
HTML:
<h2>Weather report</h2>
CSS:
h2:before {
content: “ ”;
display: block;
height: 15px;
width: 25px;
url: (‘images/icon.png’’);
margin-right: 5px;
}
结果将是:
现在我们已经成功地在文本前面添加了一个图标。容易,对吧?
在浮动元素之后,需要添加另一个元素以清除浮动。您可以通过使用pseudo one来避免添加新元素。
假设我们有这样的情况:
我们可以使用下面的代码来清除浮动。
HTML:
<div class="box-container">
<div class=”box”></div>
<div class=”box”></div>
</div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p>
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:
<h2>Hello World</h2>
CSS:
h2:after {
content: “”;
width: 100%;
height: 30px;
background: url(‘underline.png’) center center no-repeat;
display: block;
}
结果实现了:
与CSS中的其他内容一样,需要检查浏览器支持。通过咨询我可以使用的服务,我们发现这些伪类具有很高的浏览器支持(超过98%),并且在使用它们时我们不会感到头痛。
这里,我们解释了CSS伪元素的基本原理。这些例子说明了一些可能的用法。如果一开始还不完全清楚,不要担心,做点小练习吧。
希望本文将有助于你项目。感谢您的阅读!