7 ::之前的实际用途和:: CSS中的伪元素之后

CSS 的 ::before 和 ::after 伪元素允许您在任何非替换元素（例如，它们适用于 <div> 但不适用于 <code><img alt="7 ::之前的实际用途和:: CSS中的伪元素之后" >）之前和之后插入“内容”。这实际上允许您在网页上显示 HTML 内容中可能不存在的内容。您不应该将其用于实际内容，因为它在可访问性方面不太好，因为您甚至无法选择和复制以这种方式插入页面上的文本——它只是装饰性内容。在本文中，我将引导您完成七个不同的示例，这些示例展示了如何使用 ::before 和 ::after 创建有趣的效果。

目录

• 样式损坏的图像
• 自定义块引用
• 图标项目符号列表
• 动画切换开关
• 渐变边框
• 渐变叠加
• 自定义单选按钮
• 总结

请注意，对于大多数示例，我只解释与 CSS 伪元素特别相关的代码部分。也就是说，如果您想查看其他样式的代码，所有 CSS 都包含在嵌入式演示中。

样式损坏的图像

当用户访问您的网站时，他们的互联网连接（或超出您控制范围的因素）可能会阻止您的图像下载，因此浏览器会显示损坏的图像图标和图像的替代文本（如果确实存在）。

如何改用自定义占位符？您可以使用 ::before 和 ::after 以及一些 CSS 定位来实现这一点。

首先，我们需要在图像元素上使用相对定位。我们稍后将在其中一个伪元素上使用绝对定位，因此这种相对位置确保伪元素位于图像元素的内容内，而不是完全脱离文档流。

img {
  display: block; /*避免由行高引起的图像下方的空间*/
  position: relative;
  width: 100%;
}

接下来，让我们使用图像的 ::before 伪元素创建损坏图像效果的区域。我们首先将使用浅灰色背景和稍暗的边框对其进行样式设置。

img::before {
  background-color: hsl(0, 0%, 93.3%);
  border: 1px dashed hsl(0, 0%, 66.7%);
  /* ... */
}

<img alt="7 ::之前的实际用途和:: CSS中的伪元素之后" > 是一个替换元素。为什么要在其上使用 ::before 伪元素？它不起作用！正确。在这种情况下，当图像无法加载时，伪元素将显示在 Chrome 和 Firefox 中，这正是您想要的。同时，Safari 只显示应用于替代文本的样式。

样式应用于损坏图像的左上角。

到目前为止，一切顺利。现在我们可以将其设置为块级元素（display: block）并赋予其填充整个可用空间的高度。

img::before {
  /* ... */
  display: block;
  height: 100%;
}

我们可以进一步完善样式。例如，让我们圆角。我们还应该通过为伪元素提供全宽和绝对定位来为替代文本留出一些空间，以便更好地控制将内容放置在我们想要的位置。

img::before {
  /* ... */
  border-radius: 4px;
  content: "";
  position: absolute;
  width: 100%;
}

如果您在此处停止并检查您的工作，您可能会挠头，因为替代文本突然消失了。

这是因为我们将 content 设置为空字符串（我们需要显示我们生成的內容和样式）并覆盖整个空间，包括实际的替代文本。它在那里，我们只是看不到它。

我们可以通过替代（明白了吗？）方式显示替代文本，这次借助 ::after 伪元素。content 属性实际上能够使用 attr() 函数显示图像的 alt 属性文本：

img::after {
  content: attr(alt);

  /*一些简单的样式*/
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
}

这太棒了！至少在 Chrome 中是这样。

但是，在 Firefox 中，情况并非如此。

一个快速的解决方法是使用属性选择器（在本例中为 img[alt]）直接定位 alt 属性，并在那里定位类似的样式，以便与 Chrome 匹配。

img[alt] {
  text-align: center;
  font-weight: bold;
  color: hsl(0, 0%, 60%);
}

现在我们有一个在 Chrome 和 Firefox 中一致的优秀占位符。

自定义块引用

块引用是引文或引自作品的摘录。它们也提供了一个非常好的机会，可以用视觉上有趣的内容来打破一堵文本墙。

有各种各样的方法可以设置块引用的样式。Chris 有一套五种样式，可以追溯到 2007 年。

我想看看另一种技术，一种结合了 ::before 和 ::after 的技术。就像我们在上一个示例中看到的那样，我们可以使用 content 属性来显示生成的內容，并应用其他属性来装饰它。让我们在块引用的开头和结尾加上大引号。

HTML 很简单：

<blockquote>

</blockquote>

CSS 中的一些装饰：

blockquote {
  font-style: italic;
  line-height: 1.618;
  font-size: 1.2em;
  width: 30em;
  position: relative;
  padding: 40px 80px;
}

请注意其中的 position: relative，因为正如您将了解到的那样，它对于定位块引用至关重要。

正如您可能猜到的那样，我们将使用 ::before 用于第一个引号，使用 ::after 用于结束引号。现在，我们可以简单地在两者上调用 content 属性并在其中生成标记。但是，CSS 为我们提供了 open-quote 和 close-quote 值。

blockquote::before {
  content: open-quote;
  /*将其放置在左上角*/
  top: 0;
  left: 0;
}

blockquote::after {
  content: close-quote;
  /*将其放置在右下角*/
  bottom: 0;
  right: 0;
}

这为我们提供了我们想要的引号，但我允许我稍微整理一下样式：

blockquote::before,
blockquote::after {
  background-color: #cccccc;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 1.618;
  font-size: 3em;
  border-radius: 100%;
  text-align: center;
  position: absolute;
}

图标项目符号列表

我们在 HTML 中有有序（<ol></ol>）和无序（<ul></ul>）列表。两者都有浏览器用户代理样式表决定的默认样式。但是，使用 ::before 伪元素，我们可以用我们自己的内容覆盖这些“默认”样式。你猜怎么着？我们可以在 content 属性上使用表情符号（?）！

.name-list li::before {
  content: "?";
  margin-right: 15px;
  font-size: 20px;
}

虽然这很好，但值得注意的是，我们实际上可以使用 ::marker 伪元素，该元素专门用于设置列表标记的样式。Eric Meyer 向我们展示了它的工作原理，从长远来看，这可能是一种更好的方法。

动画切换开关

为表单设置样式最巧妙的技巧之一是使用标准 HTML 复选框创建切换开关。事实上，Preethi Sam 最近在展示一些其他使用 CSS 蒙版的复选框样式技巧时，分享了一种方法。

顾名思义，切换开关用于切换或切换复选框元素的选中和未选中状态。

<label>
  <input type="checkbox">
</label>

所有自定义都是由于通过 ::before 和 ::after 伪元素添加到 <label></label> 元素的修改。但首先，这里有一些 <label></label> 元素的基本 CSS：

.container {
  background: #212221;
  background: linear-gradient(to right, #1560bd, #e90);
  border-radius: 50px;
  height: 40px;
  position: relative;
  width: 75px;    
}

我们将“隐藏”复选框的默认外观，同时使其占据全部空间。奇怪吧？它是不可见的，但技术上仍然存在。我们通过以下方式做到这一点：

• 将其位置更改为绝对位置，
• 将外观设置为无，以及
• 将其宽度和高度设置为 100%。

input {
  -webkit-appearance: none; /* Safari */
  cursor: pointer; /*显示它是一个交互式元素*/
  height: 100%;
  position: absolute;
  width: 100%;
}

现在，让我们使用其 ::before 伪元素设置 <input> 元素的样式。此样式将更改输入的外观，使我们更接近最终结果。

input::before {
  background: #fff;
  border-radius: 50px;
  content: "";
  height: 70%;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%); /*将样式移动到元素的中心*/
  width: 85%;
}

什么，等等？您可能会认为 ::before 不适用于替换元素，例如 <input>。这是正确的，但仅当输入类型为图像时，这等效于 <img alt="7 ::之前的实际用途和:: CSS中的伪元素之后" > 元素。其他表单控件（如复选框）在 HTML 规范中定义为非替换元素。

接下来，我们需要创建“切换”按钮，碰巧我们仍然可以使用 ::after 伪元素来创建它。但是，有两点值得一提：

1. 背景是线性渐变。
2. “切换”按钮使用 transform 属性移动到 <input> 的中心。

input::after {
  background: linear-gradient(to right, orange, #8e2de2);
  border-radius: 50px;
  content: "";
  height: 25px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%);
  transition: all .4s;
  width: 25px;
}

尝试单击切换按钮。什么也没有发生。这是因为我们实际上并没有更改 <input> 的选中状态。即使我们更改了，结果也是……令人不快。

解决方法是将 :checked 属性应用于 <input> 的 ::after 伪元素。通过专门定位复选框的选中状态并将其链接到 ::after 伪元素，我们可以将切换按钮移回原位。

input:checked::after {
  opacity: 1;
  transform: translate(170%, -50%);
}

渐变边框

我们可以用边框装饰图像，使它们脱颖而出或更无缝地融入设计中。您知道我们可以在边框上使用渐变吗？好吧，我们可以使用 ::before（当然还有其他方法）。

核心思想是在图像上创建一个渐变，并使用 CSS z-index 属性和负值。负值在堆叠顺序中将渐变拉到图像下方。这意味着只要渐变具有负 z-index，图像始终显示在顶部。

.gradient-border::before {
  /*呈现样式*/
  content: "";
  /*填充整个空间*/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*创建渐变*/
  background-image: linear-gradient(#1a1a1a, #1560bd);
  /*将渐变堆叠在图像后面*/
  z-index: -1;
}

figure {
  /*删除默认边距*/
  margin: 0;
  /*挤压图像，显示其后面的渐变*/
  padding: 10px;
}

渐变叠加

这与我们在上一个示例中所做的类似，但是在这里，我们正在图像顶部应用渐变。我们为什么要这样做？它可以是一种很好的方法，可以为图像添加一些纹理和深度。或者，如果顶部有需要额外对比度才能提高可读性的文本，它可以用来使图像变亮或变暗。

虽然这与我们刚才所做的类似，但您会注意到一些明显的区别：

figure::before {
  background-image: linear-gradient(to top right, #1a1a1a, transparent);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

看到了吗？没有 z-index，因为渐变堆叠在图像顶部是可以的。我们还在背景渐变中引入了透明度，这允许图像透过渐变显示。你知道的，就像叠加一样。

自定义单选按钮

大多数（如果不是全部）我们都尝试自定义 HTML 单选按钮的默认样式，这通常是通过 ::before 和 ::after 完成的，就像我们之前对复选框所做的那样。

我们首先设置一些基本样式，只是为了做好准备：

/*居中所有内容*/
.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

/*表单元素的样式*/
.form {
  background: #ccc;
  height: 100vh;
  width: 100%;
}

/*输入的样式*/
.form-row {
  background: #fff;
  border-radius: 50px;
  height: 40px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 150px;
}

现在让我们使用 appearance: none; 删除单选按钮的默认样式：

.form-input {
  -webkit-appearance: none; /* Safari */
  appearance: none;
}

::before 应位于单选按钮的左上角，选中时，我们将更改其背景颜色。

.form-input::before {
  /*呈现样式*/
  content: '';
  /*显示它是交互式的*/
  cursor: pointer;
  /*将其定位到输入的左上角*/
  position: absolute;
  top: 0;
  left: 0;
  /*占据整个空间*/
  height: 100%;
  width: 100%;
}

/*当输入处于选中状态时...*/
.form-input:checked::before {
  /*更改背景颜色*/
  background: #21209c;
}

我们仍然需要使用 ::after 来解决一些问题。具体来说，当单选按钮被选中时，我们希望将圆形环的颜色更改为白色，因为在其当前状态下，圆环是蓝色的。

.form-input::after {
  /*呈现样式*/
  content: '';
  /*显示它是交互式的*/
  cursor: pointer;
  /*一些边框样式*/
  border-radius: 50px;
  border: 4px solid #21209c;
  /*定位环*/
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate(0, -50%);
  /*设置尺寸*/
  height: 15px;
  width: 15px;
}

/*当输入处于选中状态时...*/
.form-input:checked::after {
  /*将::after的边框更改为白色*/
  border: 4px solid #ffffff;
}

表单标签在这里仍然不可用。我们需要直接定位表单标签以添加颜色，当表单输入被选中时，我们将颜色更改为可见的颜色。

.form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
}

单击按钮，仍然没有任何反应。这是怎么回事。::before 和 ::after 上的 position: absolute 在单选按钮被选中时会遮盖内容，因为 HTML 文档层次结构中发生的任何内容都会被遮盖，除非它们被移动到 HTML 文档中的新位置，或者它们的位置使用 CSS 进行了更改。因此，每次选中单选按钮时，其标签都会被覆盖。

您可能已经知道如何解决这个问题，因为我们之前在另一个示例中解决了类似的问题？我们将 z-index: 1（或 position: absolute）应用于表单标签。

.form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
  z-index: 1; /*确保标签堆叠在顶部*/
  /* position: absolute; 这是一个替代选项 */
}

总结

我们介绍了七种不同的方法，可以使用 ::before 和 ::after 伪元素来创建有趣的效果，自定义默认样式，制作有用的占位符以及为图像添加边框。

我们绝非涵盖了利用这些可以使用 CSS 选择的其他元素时可以解锁的所有可能性。然而，Lynn Fisher 已将其作为一项爱好，使用单个元素制作出令人惊叹的设计。而且我们不要忘记 Diana Smith 的 CSS 艺术，它在多个地方使用伪元素来获得逼真的绘画效果。