深入研究 CSS 中的 ::before 和 ::after 伪元素

今天药忘吃喽~ 2022-09-02 05:21 178阅读 0赞

![16ef48fb825367da8dc56b8371765940.png][]

原文 | https://betterprogramming.pub/mastering-css-before-and-after-ecf1d59d9a3d

翻译 | 小爱

CSS 伪元素用于为元素的指定部分设置样式。回顾一下，让我们检查一下 Mozilla 开发者网络上的参考解释：

*“CSS 伪元素是添加到选择器的关键字，可让您设置所选元素的特定部分的样式。例如，::first-line 可用于更改段落第一行的字体。”* — MDN网络文档

可用的 CSS 伪元素列表不是很长。但是，熟悉它们很重要。每一个都有特定的目的。它们可以极大地改进你的 Web 代码库。

以下是所有 CSS 伪元素：

*  ::after
 *  ::before
 *  ::first-letter
 *  ::first-line
 *  ::marker
 *  ::selection

它们看起来都相当简单。它们可以构建一些简洁而强大的布局。你觉得哪一款最酷？

::before 和 ::after 是我最喜欢的。它们能够在保持 HTML 和 CSS 最小化的同时做非常酷的事情。

在本文中，我们可以用它构建所有很酷的东西。我们还将看到他们的常见用例是什么。

**语法**

在深入研究之前，让我们看一下伪元素的一般语法：

selector::pseudo-element {
      property: value;
    }

请注意我们需要使用双冒号 (::) 而不是单个冒号 (:)。这就是 CSS3 语法。最初，他们的语法规范只有一个冒号（CSS2、CSS1）。

这种变化是由 W3C 推动的。他们旨在明确区分那些使用单个冒号的伪类。

它们之间有什么区别？简而言之，伪类用于选择非表现性特征。另一方面，伪元素使我们能够创建新的虚拟元素。

请注意，出于向后兼容性的考虑，大多数浏览器仍接受来自 CSS2 和 CSS1 的单冒号语法。

**::before 和 ::after 工作如何？**

这些伪元素用于在目标元素之前或之后添加内容。

对内容的放置位置有一个常见的误解。许多人认为内容将放置在选定的 HTML 标记之前或之后。相反，它将被放置在元素的内容之前或之后。

让我们看看这个例子：

p::before {
      content: "foo - ";
    }
    <p>text</p>

在原始 HTML 中，“输出”将等同于：

✅ <p>foo - text</p>

而不是这个：

❌ foo - <p> text</p>

由于 ::before 和 ::after 在元素内容之前添加内容，因此有一个标签不起作用：<img />，此标签不会在其中添加内容。它只是媒体内容的替代品。这意味着它不适用于任何伪元素。

**内容属性**

对于伪元素，内容属性至关重要。默认情况下，内容设置为无。这意味着如果你尝试在不添加该属性的情况下设置元素的样式，实际上什么也不会发生。

p::before {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    <p>text</p>
    ❌ Only the paragraph text will be displayed

让我们通过添加一些内容来修复上面的示例：

p::before {
      content: '';
      width: 100px;
      height: 100px;
      background-color: red;
    }
    <p>text</p>
    ✅ The text paragraph + a box of 100x100 and red will be displayed

即使我们不想添加任何文本，我们仍然需要用 '' 填充该属性。这是使用伪元素时最常见的错误之一。

现在我们已经看到了内容的重要性，让我们通过查看 MDN 来准确定义它是什么：

*“内容 CSS 属性用生成的值替换元素。使用 content 属性插入的对象是匿名替换元素。” — MDN 网络文档*

content 属性非常强大，让我们可以添加来自许多不同来源的内容。当使用这个属性在伪元素上显示任何东西时，我们需要注意几个怪癖：

默认情况下，内容将显示为 display-inline 而不是 display:block。

如果内容是字符串，用户将无法选择。这意味着用户将无法用鼠标复制它。它应该是 atrezzo 而不是主要内容。

**内容值**

我们可以使用 content: 'foo' 直接添加字符串内容。如果我们希望文本可翻译怎么办？如果我们直接在 CSS 样式表中添加文本，将很难用适当的翻译替换它。

对于该用例，我们可以将翻译存储在具有属性的元素中。然后，我们可以通过引用该属性将其与内容一起拉出。这将使我们的 CSS 保持动态，而不是静态绑定到字符串。

让我们看一个例子：

<!DOCTYPE html>
    <html>
      <style>
        p {
          padding: 1.25rem;
          font-weight: bold;
          font-size: 1.25rem;
        }
    
    
        p::before {
          content: attr(data-before-text);
          background-color: aqua;
          margin-right: 0.625rem;
          padding: 0.625rem;
        }
    </style>
    
    
      <body>
        <p data-before-text="foo">hello world</p>
      </body>
    </html>

让我们看一下结果：

![8ba0cbf3dd79357d9717986aa20d245f.png][]

请注意，我们如何使用属性 before-text 来提取文本：

p::before {
      content: attr(data-before-text);
      background-color: aqua;
      margin-right: 0.625rem;
      padding: 0.625rem;
    }

content 属性可以包含URL。让我们看一个具有该用例的示例：

p::before {
      content: url(https://unsplash.it/15/15);
      margin-right: 0.625rem;
    }

让我们看一下结果：

![d34b1e17ac94237ac86e66cadb68f93a.png][]

除了 URL、属性和字符串之外，内容属性还可以包含各种属性：计数器、引号、线性渐变等。你可以在 MDN Web Docs 上查看完整列表。

我们不限于使用一处。我们可以将多个内容属性合二为一。

p::before {
      content: attr(data-details) "- more details -";
      margin-right: 0.625rem;
    }

**示例**

既然我们已经看到了 ::before 和 ::after 结合内容的强大功能，让我们来看一些实际的例子。

**1、化妆品**

主要用例之一主要用于化妆品。你可以使用它们为元素添加一些视觉美感。

让我们通过一个例子更好地了解它：

<!DOCTYPE html>
    <html>
      <style>
        h1 {
          font-weight: bold;
        }
    
    
        h1::after {
          content: "";
          display: block;
          background-color: #73937e;
          height: 0.2em;
          width: 100%;
        }
    
    
        h1::before {
          content: "";
          display: block;
          background-color: #73937e;
          height: 0.2em;
          width: 100%;
        }
    </style>
    
    
      <body>
        <h1>Header title</h1>
      </body>
    </html>

让我们看一下结果：

![218d007e17c5ffa22d0dd810d26ae6b1.png][]

只需很少的代码和额外的标记，我们就可以实现一个，否则需要大量工作的布局。

**2、自定义块引用**

另一个很好的用法是创建你的自定义块引用。让我们自定义该 HTML5 标记，以使用 CSS 和自定义属性创建一个可重用的组件。

让我们看看它的代码：

<!DOCTYPE html>
    <html>
      <style>
        blockquote {
          font-weight: bold;
          font-size: 1rem;
          font-style: italic;
        }
    
    
        blockquote::before {
          content: open-quote;
          font-style: normal;
          color: #585563;
        }
    
    
        blockquote::after {
          content: close-quote " - " attr(data-author);
          font-style: normal;
          color: #585563;
        }
    </style>
    
    
      <body>
        <blockquote data-author="Isaac Asimov">
          I do not fear computers. I fear lack of them.
        </blockquote>
      </body>
    </html>

让我们看一下结果：

![d1edf86082cbcfdf32e723c9d5da8512.png][]

**3、自定义排序列表**

另一个用例是创建自定义 HTML 有序列表。这可以通过使用 counter-reset、counter-increment 和 counter(counter-name) 来实现。

让我们看看它的代码：

<!DOCTYPE html>
    <html>
      <style>
        ol {
          list-style: none;
          counter-reset: chapter_counter;
        }
    
    
        li {
          margin-bottom: 2.5em;
          margin-left: 2.5em;
          position: relative;
        }
    
    
        li::before {
          content: counter(chapter_counter);
          counter-increment: chapter_counter;
          position: absolute;
          left: -2.6em;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          font-style: normal;
          font-size: 0.8em;
          width: 2em;
          height: 2em;
          color: white;
          background-color: #0566e6;
          border: 2px solid #0046a1;
        }
    </style>
    
    
      <body>
        <ol>
          <li>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text ever
            since the 1500s.
          </li>
          <li>
            Contrary to popular belief, Lorem Ipsum is not simply random text. It
            has roots in a piece of classical Latin literature from 45 BC, making it
            over 2000 years old.
          </li>
          <li>
            Of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown
            printer took a galley of type and scrambled it to make a type specimen
            book. It has survived not only five centuries, but
          </li>
        </ol>
      </body>
    </html>

让我们看一下结果：

![c642f697f8d9c5708375f639944e71a8.png][]

**最后的想法**

我们已经看到这两个伪元素是多么有趣。可能性是无止境。它们有助于减少不必要的标记并通过丰富你的元素来增加价值。

它们并不意味着被过度使用。正如我们所看到的，有一些特殊的用例确实很出色。在其他情况下，如果使用不当，它们可能会成为一种负担。

我希望这篇文章能帮助你理解它们。

#  #

**学习更多技能**

**请点击下方公众号**

![d46d218cab1f5c37f01d519b9dc0c2b5.gif][]

![a7b1fb55966b6f2b93a3c07c028d9399.png][]

![6439cf81a4636a993a220ff8507287e9.png][]

[16ef48fb825367da8dc56b8371765940.png]: /images/20220829/98111db37b7549039b7ac3d29b6ee68d.png
[8ba0cbf3dd79357d9717986aa20d245f.png]: /images/20220829/cb6ce7cad5324d8abbed82a938ee8e13.png
[d34b1e17ac94237ac86e66cadb68f93a.png]: /images/20220829/cbd84bfc318f4842a3720903dc7d5ce4.png
[218d007e17c5ffa22d0dd810d26ae6b1.png]: /images/20220829/392c423dd577402eb33c6fa3cb8ae008.png
[d1edf86082cbcfdf32e723c9d5da8512.png]: /images/20220829/4a27c227d88c4621839df42f0ffb944d.png
[c642f697f8d9c5708375f639944e71a8.png]: /images/20220829/d0c5d83870b8430fb9701b1f9d3cd1fb.png
[d46d218cab1f5c37f01d519b9dc0c2b5.gif]: /images/20220829/f3f27f1a94394a7e8ac40a322b24fc12.png
[a7b1fb55966b6f2b93a3c07c028d9399.png]: /images/20220829/a8efc5792626409face86d74853f3ea8.png
[6439cf81a4636a993a220ff8507287e9.png]: /images/20220829/57d7c79077cf4321a2992d10d43e0e53.png