我正在查看一些Twitter Bootstrap模板,我看到在::before
标签之前和之后插入了很多::after
和div
。
有人可以告诉我它们是什么吗?
答案 0 :(得分:16)
::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! ';
}
答案 1 :(得分:4)
它们表示伪元素,您不直接在标记中包含这些元素,但可以使用CSS创建一些整洁的效果。您已经提到了::before
和::after
,它们代表了在您的元素之前和之后出现的令人震惊的伪元素。
整个清单包含在下面,应该是不言自明的:
::after
::before
::first-letter
::first-line
::selection
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
注意使用双冒号,这与规范一致。有时您会看到用单个冒号指定的伪元素,但这只是因为我们需要支持不理解双冒号语法的浏览器。
答案 2 :(得分:0)
它们代表伪元素,您不直接将它们包含在标记中,但可以使用它们来创建CSS的净效果。您提到了::之前和::之后,它们代表了在元素之前和之后令人震惊地显示的伪元素。
Ref:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements