*:before 和 *:after 在 css 中做什么

Question

我研究了关于

*

（星号）的SO，我发现它选择所有元素并对它们应用样式。

我点击了此链接，使用星号，我注意到此代码将应用于

border

到所有元素。

* {
 border: 1px solid red;
}

现在，我关心的是

*:before

和

*:after

在 CSS 中做什么？

*:before,
*:after {
          box-sizing: border-box;
}

Answer 1

就像他们的名字所说的那样，：before和：after用于应用CSS属性JUST内容之前/之后WITHIN匹配元素。

有一天，一位智者说“一琴胜千言”，所以：

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Added BEFORE anything within the div!";
  color:red;
 }

div:after {
  content: "Added AFTER anything within the div!";
  color:green;
 }

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

Answer 2

:before 选择器在每个选定元素的内容之前插入一些内容。 :after 选择器在每个选定元素的内容之后插入一些内容。

so *:before 就像 Dan White 所说的在所有元素之前 并且 *:after 将位于所有元素之后

Answer 3

:after

是一个伪元素，它允许您将内容从 CSS 插入到页面上（无需将其添加到 HTML 中）。虽然最终结果实际上并不在 DOM 中，但它在页面上看起来就像是在 DOM 中，并且本质上是这样的：

div:after {
  content: "hi";
}

<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>

:before

与 HTML 中的任何其他内容之前（而不是之后）完全相同。使用其中一种而不是另一种的唯一原因是：

• 您希望生成的内容位于元素内容之前， 位置上。

• :after

  内容在源顺序中也是“之后”，所以 如果堆叠在一起，它将位于 ::before 之上 自然而然。

内容的价值可以是：

• 字符串：

  content: "a string";

  - 特殊字符需要特殊编码为unicode实体。请参阅字形页面。
• 图像：

  content: url(/path/to/image.jpg);

  - 图像按其精确尺寸插入，并且无法调整大小。由于渐变之类的东西实际上是图像，因此伪元素可以是渐变。
• 没什么：

  content: "";

  - 对于clearfix和插入图像作为背景图像很有用（设置宽度和高度，甚至可以根据背景大小调整大小）。
• 计数器：

  content: counter(li);

  - 对于样式列表非常有用，直到：标记出现。

请注意，您无法插入 HTML（至少，它会呈现为 HTML）。内容：

<h1>nope</h1>

；

Answer 4

您是说所有伪元素都将具有与 DOM 中存在的普通元素相同的框模型行为。

::before

和

::after

是伪元素，这意味着它们不在 DOM 中，无法用鼠标选择它们。

Answer 5

伪元素选择器

:before

和

:after

（或

::before

和

::after

）用于为浏览器动态生成内容，结果称为生成内容。生成的内容不属于文档的 DOM，因此对于屏幕阅读器等设备来说是不可见的。

它就像一个模板，例如我们可以使用它在列表项之前添加图标，在打印 Web 文档时在链接旁边显示 URL，在引用周围添加适合语言的引号。

这是一把小提琴，价值数千字：

ol.warning::before {
  background-image: url('https://i.postimg.cc/bYW5CQF7/6897039.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
}

ol.warning::after {
  content: "   (This is very important!)";
  color: red;
}

<ol class="warning">Having No Regular Checkups</ol>
If you make regular checkins at the gluten free aisle, but not with your doctor, that needs to change.  Checking your health with a weigh in, stress test, and blood workup is critical.

<ol class="warning">Leading A Sedentary Lifestyle</ol>
If you spend most of the day sitting and don’t have an exercise plan or routine, time to take action.  Get a plan for daily movement and make sure weights are part of the equation.

<ol class="warning">Eating Too Much </ol>
If you sure your microwave plastics are BPA free, but fill them with too many calories of processed food, time to count calories.  While you are at it, make sure your food comes from good sources and drink more water.

<ol class="warning">Staying Sleep Deprived</ol>
If you are tired, that is not a badge of honor.  That is a health hazard sign of the highest importance. Get 8 hours a night, don’t hit the snooze button, and get away from your phone an hour or more before bedtime.

<ol class="warning">Texting And Driving</ol>
No LMAO text or snapchat streak is worth your health or the health of someone else.  Learn to view this as important as fastening your seatbelt.

<!-- content from https://www.trainingforwarriors.com/the-20-most-dangerous-things-you-are-still-doing/  -->

不需要一一添加所有点的模板内容，需要时可以一次性修改。

参考资料：

1. 学习网页设计：HTML、CSS、JavaScript 和 Web 图形初学者指南
2. 学习使用 CSS 中的 :after 和 :before 伪元素