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

I was looking at a couple Twitter Bootstrap templates and I saw that a lot of ::before and ::after were inserted before and after div tags.

我正在看几个Twitter Bootstrap模板,我看到在div标签之前和之后插入了很多:: before和:: after。

Can anybody tell me what they are?

谁能告诉我它们是什么?

3 个解决方案

#1

They represent pseudo-elements, which you don't include directly in your markup, but are available to you to create some neat effects with CSS. You have mentioned ::before and ::after, and they represent pseudo-elements that appear, shockingly, before and after your elements.

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

The whole list is included below and should be fairly self-explanatory:

整个清单包含在下面,应该是相当不言自明的:

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

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Note the use of the double-colon, which is consistent with the spec. Sometimes you will see pseudo-elements specified with a single colon, but that was only because we needed to support browsers that didn't understand the double-colon syntax.

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

#2

The ::before and ::after pseudo elements are for css and are in no way bootstrap specific.

:: before和:: after伪元素用于css,并不是特定于bootstrap的。

A quick example of some of the stuff it can do is this:

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

Say you have a basic p element:

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

<p>Hello</p>

In your css, if you had this:

在你的CSS中,如果你有这个:

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

The p tag in html would now say:

html中的p标签现在会说:

HiHello

If it was

如果它是

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

It would be:

这将是:

HelloHi

This can be very useful if you're using it with things such as phone numbers, or e-mail addresses e.g

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

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

<p class='phone_number'> would now have Phone #: before it.

现在将拥有Phone#:在它之前。

You can do very many things, even use it for styling.

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

If you look at The shapes of CSS, you will see that it's used on the more complex shapes.

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

One thing that ::before and ::after have in common and MUST have to work, is the content attribute. If it doesn't have a content attribute it wont show up. Don't mistake this as having a blank content, though, as this will work provided you give it a height/width like any other element.

::之前和::之后共同必须工作的一件事是内容属性。如果它没有内容属性,它就不会显示出来。不要误以为它有一个空白的内容,因为这可以工作,只要你像任何其他元素一样给它一个高度/宽度。

::before and ::after aren't the only Pseudo elements though, here is a list:

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

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

You can also double up on these elements:

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

For example:

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

#3

They represent pseudo-elements, which you do not include directly in your markup, but which are at your disposal to create net effects with CSS. You mentioned :: before and :: after, and they represent pseudo-elements that shockingly appear before and after your elements.

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

Ref : https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Ref : https://www.w3schools.com/css/css_pseudo_classes.asp

参考:https://www.w3schools.com/css/css_pseudo_classes.asp

Ref : https://www.w3schools.com/css/css_pseudo_elements.asp

参考:https://www.w3schools.com/css/css_pseudo_elements.asp

#1