伪元素是做什么的？

Question

我无法理解在插入HTML代码后css标记之后的内容。例如，

.one-half

任何帮助表示感谢。

Answer 1

:: after 是一个伪元素，允许您将内容从CSS插入页面（不需要在HTML中）。虽然最终结果实际上不在DOM中，它在页面上显示就像它一样是，并且基本上是这样的：

div::after {
  content: "hi";
}

:: before完全相同，只是在任何内容之前插入内容 HTML中的其他内容而不是之后的内容。使用的唯一理由一个在另一个上面：

您希望生成的内容位于元素内容之前，位置上。
内容在源代码中也是“之后”，所以它会位于::之前的位置，如果堆叠在彼此之上自然。

CSS2 syntax = element：在{style properties}之后

CSS3 syntax = element :: after {style properties}

.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content:    "<- BORING!";
   color:      red;
}

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>

Answer 2

它不是标记，它是CSS中使用的伪元素选择器，用于创建元素:before或:after。

伪元素是做什么的？

伪元素完全符合这个词所暗示的含义。它创造了一个   phoney元素并在其内容之前或之后插入   您已定位的元素。

“伪”这个词基本上是希腊词的音译   意思是“撒谎，欺骗，虚假。”因此，称他们为伪元素是   适当的，因为它们实际上并没有改变任何东西   文献。相反，它们插入了可见的幽灵般的元素   用户和CSS中的样式。

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Answer 3

这可能是最容易学习的例子。

div {
  background: black;
}

div:before {
  content: "i appear before the div ";
}

div:after {
  content: " i appear after the div";
}

<div>hello</div>

输出：“我出现在div之前，我出现在div之后”

当您在带有图标等按钮之类的元素之前或之后插入图标或图像时，通常会很好用。

什么是::在这里做之后：<div class =“foo”> <span> bar </span> :: after </div>

3 个答案:

伪元素是做什么的？