CSS: :before and :after 使用

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;

}

结果将是:

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

Clearing Floats

在浮动元素之后，需要添加另一个元素以清除浮动。您可以通过使用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伪元素的基本原理。这些例子说明了一些可能的用法。如果一开始还不完全清楚，不要担心，做点小练习吧。

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