Question

我正在查看一些Twitter Bootstrap模板，我看到在::before标签之前和之后插入了很多::after和div。

有人可以告诉我它们是什么吗？

Answer 1

::before和::after伪元素适用于css，并且绝不是特定的引导程序。

它可以做的一些简单的例子就是：

假设你有一个基本的p元素：

<p>Hello</p>

在你的CSS中，如果你有这个：

p::before{
  content:'Hi';
}

p中的html标记现在会说：

HiHello

如果是

p::after{
  content:'Hi';
}

这将是：

HelloHi

如果您将其用于电话号码或电子邮件地址等内容，这将非常有用，例如

p.phone_number::before{
  content:'Phone #: ';
}

<p class='phone_number'>现在会有Phone #:。

你可以做很多事情，甚至用它来造型。

如果您查看The shapes of CSS，您会发现它已用于更复杂的形状。

::before和::after有一个共同点，必须有效，content属性。如果它没有内容属性，它就不会显示出来。不要误以为它有一个空白content，因为如果你给它一个像任何其他元素一样的高度/宽度，它就会起作用。

::before和::after不是唯一的Pseudo元素，但这里有一个列表：

::after
::before
::first-letter
::first-line
::selection

您还可以加倍使用这些元素：

例如：

p:hover::before{
  content:'Hovered! ';
}

Answer 2

它们表示伪元素，您不直接在标记中包含这些元素，但可以使用CSS创建一些整洁的效果。您已经提到了::before和::after，它们代表了在您的元素之前和之后出现的令人震惊的伪元素。

整个清单包含在下面，应该是不言自明的：

::after 
::before 
::first-letter 
::first-line 
::selection

注意使用双冒号，这与规范一致。有时您会看到用单个冒号指定的伪元素，但这只是因为我们需要支持不理解双冒号语法的浏览器。

Answer 3

它们代表伪元素，您不直接将它们包含在标记中，但可以使用它们来创建CSS的净效果。您提到了::之前和::之后，它们代表了在元素之前和之后令人震惊地显示的伪元素。