如何在CSS中使用伪元素之前和之后

伪元素是可在CSS中使用的更高级的选择器之一。这些选择器的主要目的是创建独特的样式,而无需更改用于创建给定网页基本结构的HTML文档。

这是在CSS中使用伪元素的方法。

普通伪元素

有大量伪元素可用于简化Web开发人员的生活。这些伪元素包括:

  • 背景
  • 第一行
  • 首字母

在特定情况下,某些伪元素将被证明比其他伪元素更适合,但保持不变的一件事是使用任何伪元素的一般结构。

伪元素结构示例


selector::pseudo-element{
/* css code */
}

尽管您可以将HTML元素用作选择器,但建议您使用类或ID,以避免将布局中的意外元素作为目标。您要在所需位置插入的元素,样式或数据应放在花括号之间。

伪元素之前和之后是列表中最流行的元素,并且鉴于存在许多使用它们的实用方法,因此不难理解为什么。

在CSS中使用Before Pseudo-element

尽管并非不可能,但很难在CSS中用可读文本覆盖图像。这主要是因为图像和文本将在网页上占据相同的位置。

将图像发送到一组文本的背景是相对容易的,但是当该图像太亮时,它往往会淹没其顶部的文本。在这些情况下,下一步是尝试使用opacity属性使图像的不透明度降低。

唯一的问题是,由于图像和文本占据相同的位置,因此文本也将变得有些透明。

解决此问题的几种有效方法之一是使用before伪元素。

使用伪元素之前的示例


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上面的代码创建为与下面的HTML LandingPage类一起使用。如上面的代码所示,通过使用before伪元素,我们可以将图像定位为目标,并在图像与文本组合之前在其上使用opacity属性。

 
<div class="landingPage">
<h1>Using the Before pseudo-element</h1>
<p>
This is the result of using the before pseudo-element
to overlay and image with readable text.
</p>
</div>

这将导致在图像上放置一个覆盖层,并在顶部显示明文,如下图所示:

在CSS中使用After Pseudo-element

after伪元素的实际用途是帮助创建HTML表单。大多数表单是使用一组字段创建的,这些字段需要数据才能成功提交表单。

指示表单中的字段需要数据的一种方法是在该字段的标签之后放置一个星号。 after伪元素为您提供了一种实用的方法。

使用After伪元素示例


.required::after{
content: '*';
color: red;
}

将上面的代码插入到表单的CSS部分中,将确保每个包含所需类的标签都将紧随其后的是一个红色星号。在此示例中,after伪元素也是实用的,因为它有助于将样式与结构分离(这在软件开发中始终是理想的)。

内容属性

如上面的伪元素后面的示例所示,content属性是用于将新内容插入到网页上的工具。此属性仅与before和after伪元素一起使用。

重要的是要注意,即使没有内容可提供给content属性(例如,在上面的before伪元素示例中),您仍然需要在before或after的参数内使用content属性。伪元素使它们按预期工作。

现在您可以在CSS中使用伪元素

在本文中,您学习了如何在CSS程序中识别和使用伪元素。向您介绍了伪元素之前和之后的内容,并提供了使用这两种元素的实用方法。您还可以看到为什么成功使用before和after伪元素需要content属性。