::之前和::之后做什么意思？

Question

我一直在寻找一对夫妇Twitter的引导模板,我看到了很多::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 #:它.

你可以做很多事情,甚至用它来造型.

如果你看一下CSS的形状,你会发现它用在更复杂的形状上.

有一两件事,::before和::after有共同的,而且必须有工作,是content属性.如果它没有内容属性,它就不会出现.不要误以为它有一个空白content,因为这可以工作,只要你像任何其他元素一样给它一个高度/宽度.

::before并且::after不是唯一的Pseudo元素,这里是一个列表:

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

您还可以将这些元素加倍:

例如:

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

Answer 2

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

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

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

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