什么是*：之前和*：之后在css中做

Question

我研究了关于*（星号）我发现它选择所有元素并将样式应用于它们。

我跟着这个链接，Use of Asterisk，我注意到这个代码将所有的元素应用border。

* { 
border: 1px solid red; 
} 

现在，我关心的是什么呢*:before和*:after在CSS呢？

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

Answer 1

你是说所有的伪元素将具有相同的盒子模型的行为存在于你的DOM正常的元素。 ::before和::after是伪元素，这意味着它们不在DOM中，您不能用鼠标选择它们。

Answer 2

：在选择器之前在每个选定元素的内容之前插入某些内容。 ：选择器在每个选定元素的内容之后插入某些内容后。

所以*：之前像丹·怀特说，将所有的元素 和*之前：之后将所有元素

Answer 3

:after后是一个伪元素，它允许你插入内容到来自CSS的网页（没有它需要在HTML中）。虽然最终的结果是不实际的DOM，它出现在页面上，就好像它是，并且将基本上是这样的：

div:after { 
    content: "hi"; 
} 

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

:before是完全一样的只是它插入任何其他内容之前的内容HTML而不是之后。使用一个比其他的唯一原因是：

• 你想生成的内容来位置上的元素内容之前， 。
• :after内容也是源码顺序中的“之后”，因此 它将位于::之前的顶部，如果彼此堆叠在其他顶部 自然。

内容的值可以是：

• 的字符串：content: "a string"; - 特殊字符需要特殊编码为Unicode实体。查看字形页面。
• 一张图片：content: url(/path/to/image.jpg); - 图片以精确的尺寸插入，无法调整大小。由于像渐变这样的东西实际上是图像，伪元素可以是渐变。
• Nothing：content: ""; - 适用于clearfix和插入图像作为背景图像（设置宽度和高度，甚至可以调整背景大小）。
• 计数器：content: counter(li); - 真正有用的样式列表，直到：marker出现。

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

Answer 4

就像他们的名字说，： & 前：之后使用JUST内容WITHIN匹配的元素前/后应用CSS属性。

有一天，一个聪明的人说： '一个小提琴值得一万字'，所以：

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>