学习使用:before和:after伪元素

伪元素能做什么呢?

“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。

单词“pseudo”是希腊语英译,它的基本意思是“说谎的,不诚实的,错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的,它们是像幽灵一般的元素插入在css中,他们对用户是可见的,可以通过css控制。

基本语法

:before 和 :after 伪元素编码非常简单(和大多数的css属性一样不需要一大堆的前缀)。这里是一个简单的例子。

``` #example:before { content: "#"; }

example:after {

content: "."; }
```这个例子中提到了两件事情,第一,我们用#example:before和#example:after来目标锁定相同的元素.严格的说,在代码中他们是伪元素。

第二,在内容模块中提到,伪元素如果没有设置“content”属性,伪元素是无用的。

在这个例子中,拥有属性id的元素将有一个哈希符号放置内容之前,和一个句号在内容之后。

语法笔记

你可以设置content属性值为空,并且仅仅把他当做一个内容很少的盒子。像这样:

<span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">#example:before </span>{<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> content</span>:<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"> ""</span>;<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> display</span>:<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"> block</span>;<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> width</span>:<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"> 100px</span>;<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> height</span>:<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"> 100px</span>; }然而,你不可以完全的移除content属性,如果你移除了,伪元素将不会起作用。至少,content属性需要空引用作为它的值(即:content:“”)。

你也许注意到,你也可以用两个冒号(::before 和 ::after) 写伪元素,这个我以前讨论过的。简短的解释是,对于这两种语法没有什么不同,仅仅一点的不同是,伪元素(双冒号),css3中的伪类是(单冒号)

最后就语法而言。从技术上讲,你可以普遍的应用伪元素,不是放在特殊的元素上,像这样:

<span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">:before </span>{<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> content</span>:<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"> "#"</span>; }虽然上面是有效的,但是它十分的没用。代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在里,另一个在标签里,浏览器会自动创建哪一个。

插入内容的特点

正如前面提及的,插入的内容在页面的源码里是不可见的。只能在css里可见

同时,插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给插入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。

还要注意的是典型的CSS继承规则适用于插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用到body元素里,然后伪元素会像其他元素一样继承这些字体系列。

同样的,伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。

之前或之后是什么?

你的直觉是:before和:after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是,正如上面提到的,不是这样的。

注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。

为了证明这一点,看看下面的代码。首先,在HTML:

<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">p </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">class</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="box"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>Other content.<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">p</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>下面是插入伪元素的css:

``` p.box { width: 300px; border: solid 1px white; padding: 20px; }

p.box:before { content: "#"; border: solid 1px white; padding: 2px; margin: 0 10px 0 0; } ```在此html里,你所看的一段文字带有的是一个类的box,还有这样的文字“Other content”在里面(像你所会看到的一样,如果你看见了首页的源代码)。在css中,这段内容被设置了宽度,以及一些padding和可见的边框

然后我们有了伪元素。在这个例子中,它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

伪元素不是决定性的

幸运的是,缺少伪元素不会造成大问题。大多数情况下,伪元素一般修饰(或者帮助)内容,不会给不支持的浏览器造成问题。所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。

一些提醒

正如前面提到的,伪元素不会出现在DOM中。这些元素不是真正的元素。因此,它们不是可用的。所以,不要使用伪元素生成内容,是您的网页的可用性和可访问性的关键。

另外一件需要记住的是,开发工具,例如火狐,不要用伪元素显示内容。所以,如果使用了,伪元素会造成难以维护和调试缓慢。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容