:: after和::之前如何处理内容以外的属性?

时间:2015-04-14 11:07:53

标签: html css css3 pseudo-element

我一直在理解::before::aftercontent以外的属性的使用时遇到问题。请参阅下面的代码示例,有一批代码 -

.loader,
.loader:before,
.loader:after
{
  border-radius: 50%;
} 

这对英语来说意味着什么? border-radius beforeafter是什么? 我认为评论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;
&#13;
&#13;

4 个答案:

答案 0 :(得分:3)

.element::before.element::afterPseudo-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-radiuspositioncontent声明(并复制它们),那么每个伪元素的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。见下面的例子

&#13;
&#13;
.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;
&#13;
&#13;

答案 3 :(得分:0)

:before和:after用于在内容之前添加一些内容。 特别是如果我们想要“呼叫”之前的移动图标,我们可以用两种方式来做:

1 <div><span class="ico"></span><span>Call</span></div> 现在到.ico {//我们为背景写css给出了图标的链接及其背景大小宽度高度属性。 }

  1. 其他方式是:之前。 <div><span>Call</span></div>
  2. div span:在{//这将有内容:“”之前,比所有具有绝对位置和左上方值的背景属性。} 因此在我们之前的帮助下我们不必编写额外的html标签。同样如下:标签

    之后

    由于你的CSS在之前添加了主要文本的边框,它看起来会搞砸了。 在需要适当内容之前和之后:“”,它可以是空白的,也可以是我们希望在正文之前出现的任何值。像箭头,点等。

    希望这个解释有所帮助。