我一直在理解::before
和::after
对content
以外的属性的使用时遇到问题。请参阅下面的代码示例,有一批代码 -
.loader,
.loader:before,
.loader:after
{
border-radius: 50%;
}
这对英语来说意味着什么? border-radius
before
和after
是什么?
我认为评论CSS中的部分将帮助我通过反复试验来理解它,但它让我更加困惑。
有人可以通过以下方式翻译下面CSS中的:before
和:after
部分吗?
.loader,
.loader:before,
.loader:after
{
border-radius: 50%;
}
.loader:before,
.loader:after
{
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
}
.loader
{
font-size: 11px;
text-indent: -99999em;
margin: 5em auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em #FFF;
-webkit-transform: translateZ(0);
}
.loader:after
{
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body
{
background: #0dcecb;
}

<div class="loader">Loading...</div>
&#13;
答案 0 :(得分:3)
.element::before
和.element::after
是Pseudo-elements,如果需要,可以代表实际元素,或插入内容(或两者)。
你可以想象它的工作原理如下:
<div>
<element BEFORE></element>
.. div content ..
<element AFTER></element>
</div>
您的示例是了解这些元素的一种不好的方法,因为它的使用非常先进。
border-radius
适用于这些元素,就像您已经应用于任何其他元素一样。如果它有宽度,大小和某些外观(如背景颜色),您将看到应用于它的边框半径。
答案 1 :(得分:2)
content
属性在第二个规则集中声明:
.loader,
.loader:before,
.loader:after
{
border-radius: 50%;
}
.loader:before,
.loader:after
{
position: absolute;
content: '';
}
...
这里单独指定border-radius
的原因是因为作者想要将它不仅应用于伪元素,还应用于.loader
元素本身,正如您从选择器中看到的那样
所有::before
和::after
规则匹配相同的.loader
元素级联,以便为所述.loader
元素创建每个伪元素之一。由于 确实指定了content
属性,因此将呈现伪元素 ,并all of the other properties applying to the pseudo-elements will take effect where applicable:
伪元素的行为与CSS中的真实元素一样,下面描述的例外情况和elsewhere。
简而言之,您所拥有的与您的基本生成内容CSS规则没有什么不同;为了选择器的目的,作者只是选择将一些声明拆分为其他规则集。
对于它的价值,如果作者没有选择拆分border-radius
,position
和content
声明(并复制它们),那么每个伪元素的CSS会是什么样子每个伪元素一次):
.loader:before
{
border-radius: 50%;
position: absolute;
content: '';
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
}
.loader:after
{
border-radius: 50%;
position: absolute;
content: '';
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
}
答案 2 :(得分:0)
:before
和:after
是不在DOM中的伪元素(这意味着您无法点击它们),但您可以通过css使用它们。 content
是必需的,通常只设置为空字符串。这些元素可以用作扩展元素绑定的普通div。见下面的例子
.my-div {
height: 20px;
width: 300px;
border: 5px solid #454545;
margin: 0 auto;
position: relative;
/* used to position :before and :after elements as they are absolute positioned */
}
.my-div:before {
content: '<';
background-color: red;
position: absolute;
left: -20px;
top: 0;
display: block;
width: 20px;
height: 100%;
color: white;
font-weight: bold;
text-align: center;
}
.my-div:after {
content: '>';
background-color: green;
position: absolute;
right: -20px;
top: 0;
display: block;
width: 20px;
height: 100%;
color: white;
font-weight: bold;
text-align: center;
}
&#13;
<div class='my-div'>CONTENT</div>
&#13;
答案 3 :(得分:0)
:before和:after用于在内容之前添加一些内容。 特别是如果我们想要“呼叫”之前的移动图标,我们可以用两种方式来做:
1 <div><span class="ico"></span><span>Call</span></div>
现在到.ico {//我们为背景写css给出了图标的链接及其背景大小宽度高度属性。 }
<div><span>Call</span></div>
div span:在{//这将有内容:“”之前,比所有具有绝对位置和左上方值的背景属性。} 因此在我们之前的帮助下我们不必编写额外的html标签。同样如下:标签
之后由于你的CSS在之前添加了主要文本的边框,它看起来会搞砸了。 在需要适当内容之前和之后:“”,它可以是空白的,也可以是我们希望在正文之前出现的任何值。像箭头,点等。
希望这个解释有所帮助。