*:before和*:after在CSS中做什么 [英] What does *:before and *:after do in css

问题描述

我对* (星号)进行了研究，发现它可以选择所有元素并为其应用样式.

I researched on SO about *(Asterisk) and I have found that it selects all elements and applies styles to them.

我点击了以下链接，使用星号，并且我注意到这段代码会将border应用于所有元素.

I followed this link, Use of Asterisk and I noticed that this code will apply border to all of the elements.

* {
 border: 1px solid red;
}

现在，我担心的是*:before和*:after在CSS中做什么?

Now, my concern is that what does *:before and *:after do in CSS?

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

推荐答案

就像他们的名字一样，:before & :after 用于在内容 WITHIN 匹配元素之前/之后应用CSS属性 Just .

Like their name said it, :before & :after are used to apply css properties JUST before/after the content WITHIN the matching element.

一天，一个聪明的人说:一个小提琴值几千个单词"，所以:

One day, a wise man said 'One fiddle is worth thousands words', so :

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和*:after在CSS中做什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！