正如它们的名字所说，*：before &：after * 用于在内容WITHIN之前/之后应用css属性JUST。
有一天，一位智者说："一曲小提琴胜过千言万语。"

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>

：before selector在每个选定元素的内容之前插入内容。：after selector在每个选定元素的内容之后插入内容。
因此 *：before就像Dan白色说的那样，将位于所有元素之前，而 *：after将位于所有元素之后

:after是一个伪元素，它允许您从CSS向页面插入内容（而不需要在HTML中）。虽然最终结果实际上不在DOM中，但它在页面上显示为DOM，基本上如下所示：

div:after {
  content: "hi";
}

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

:before完全相同，只是它将内容插入到HTML中的任何其他内容之前，而不是之后。使用其中一个的唯一原因是：

• 您希望生成的内容在位置上位于元素内容之前。
• :after内容在源代码顺序中也是“after”，因此如果自然地堆叠在彼此的顶部，它将位于：：before的顶部。

内容的值可以是：

*字符串：content: "a string";-特殊字符需要特殊编码为unicode实体。参见glyph页面。
*一个图像：content: url(/path/to/image.jpg);-图像以其精确尺寸插入，并且不能调整大小。因为像渐变这样的东西实际上是图像，所以伪元素可以是渐变。
*Nothing：content: "";-用于清除修复和插入图像作为背景图像（设置宽度和高度，甚至可以使用背景大小调整大小）。
*计数器：content: counter(li);-对样式列表非常有用，直到：marker沿着。

请注意，您不能插入HTML（至少，它将呈现为HTML）。内容：<h1>nope</h1> ;

您是说所有伪元素都将具有与DOM中存在的正常元素相同的box模型行为。::before和::after是伪元素，这意味着它们不在DOM中，您无法使用鼠标选择它们。

伪元素选择器:before and :after（或::before和::after）用于为浏览器动态生成内容，其结果称为生成的内容，生成的内容不属于文档的DOM，因此对屏幕阅读器等设备不可见。
它就像一个模板，例如，我们可以使用它在列表项之前添加图标，在Web文档打印出来时在链接旁边显示URL，在引用周围添加语言合适的引号。
下面是a fiddle，它可能有几千个字的价值：

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. Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics
2. Learning To Use The :after And :before Pseudo-Elements In CSS