首頁 > 文章 > web前端 > 關於CSS中的before和:after偽元素的使用分析

關於CSS中的before和:after偽元素的使用分析

不言原創: 2018-06-11 15:00:331661瀏覽

這篇文章主要介紹了CSS中的before和:after偽元素使用詳解,包括對一些非文本內容的插入操作使用,需要的朋友可以參考下

如果你一直密切關注著各種網頁設計的博客，你可能已經注意到了:before和:after偽元素已經在前端開發中獲得了相當多的關注。特別是在Nicolas Gallagher的部落格中，後期運用了許多偽類元素。
2015527152013288.png (500×334)

Nicolas Gallagher使用偽元素以靜態的HTML標籤建立84個GUI圖示。

為了補充說明上述內容(和利用當前發展的趨勢)，我收集一些完全在偽元素下運行的東西。本文主要針對這一類人群，即已經看到了用偽元素做出了很酷的東西，但想知道所有有關before在css技術裡的運用。

儘管css 規範包含其他的偽元素，我們焦點是 :before 和 :after。因此，為了簡便起見，我所說的「偽元素」泛指這兩個特別的偽元素。
偽元素能做什麼呢？

“偽元素”，顧名思義。它創建了一個虛假的元素，並插入到目標元素內容之前或之後。

單字「pseudo」是希臘文的英譯，它的基本意思是「說謊的，不誠實的，錯的。」因此叫偽元素是適合的。因為在文檔中它不實際改變什麼。相反的，它們是像幽靈一般的元素插入在css中，他們對用戶是可見的，可以透過css控制。
基本語法

:before 和 :after 偽元素編碼非常簡單(和大多數的css屬性一樣不需要一大堆的前綴)。這裡是一個簡單的例子。

#example:before {   
  content: "#";   
}   
#example:after {   
  content: ".";   
}

這個例子中提到了兩件事情，第一，我們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是偽元素。

第二，在內容模組中提到，偽元素如果沒有設定「content」屬性，偽元素是無用的。

在這個例子中，擁有屬性id的元素將有一個哈希符號放置內容之前，和一個句號在內容之後。
語法筆記

你可以設定content屬性值為空，並且只把他當作一個內容很少的盒子。像這樣:

#example:before {   
  content: "";   
  display: block;   
  width: 100px;   
  height: 100px;   
}

然而，你不可以完全的移除content屬性，如果你移除了，偽元素將不會起作用。至少，content屬性需要空引用作為它的值(即:content:“”)。

你也許注意到，你也可以用兩個冒號(::before 和 ::after) 寫偽元素，這個我以前討論過的。簡短的解釋是，對於這兩種語法沒有什麼不同，僅僅一點的不同是，偽元素(雙冒號)，css3中的偽類是（單冒號）

最後就語法而言。從技術上講，你可以普遍的應用偽元素，不是放在特殊的元素上，像這樣：

:before {   
  content: "#";   
}

雖然上面是有效的，但是它十分的沒用。程式碼會在DOM裡的每個元素的內容之前插入散列符號。即使你刪除了6c04bd5ca3fcae76e30b72ad730ca86d標籤和它的所有內容，你仍會在頁面上看到兩個雜湊符號：一個在100db36a723c770d327fc0aef2ce13b1裡，另一個在6c04bd5ca3fcae76e30b72ad730ca86d標籤裡，瀏覽器會自動創建哪一個。
插入內容的特色

如同前面所提及的，插入的內容在頁面的原始碼裡是看不見的。只能在css裡可見

同時，插入的元素在預設情況下是內聯元素（或者，在html5中，在文字語意的類別裡）。因此，為了給插入的元素一個高度，填充，邊距等等，你通常必須明確地定義它是一個區塊級元素。

這會是如何設計偽元素的一個簡要的說明，看我下面文字編輯器的這幅圖
2015527152044668.jpg (500×324)

在這個例子中，我高亮的樣式將會被套用到元素裡插入到目標元素內容的前面和後面。

還要注意的是典型的CSS繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用在body元素裡，然後偽元素會像其他元素一樣繼承這些字體系列。

同樣的，偽元素不會繼承沒有自然繼承自父元素(如 padding and margins)的樣式。
之前或之後是什麼？

你的直覺是:before和:after偽元素可能是插入的內容會被注入到目標元素的前或後注入。但是，正如上面提到的，不是這樣的。

注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。

為了證明這一點，看看下面的程式碼。首先，在HTML：

<p class="box">Other content.</p>

下面是插入偽元素的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。

这里是浏览器中查看的结果：
2015527152119859.jpg (500×175)

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。
插入非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {   
  content: url(image.jpg);   
}

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择ATRR(X)中的函数的形式。此功能，根据规范?，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {   
  content: attr(href);   
}

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个3499910bf9dac5ae3c52d5ede7383485元素的href值立即被放置在每个各自的3499910bf9dac5ae3c52d5ede7383485元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

你也可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的

然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，所以它在这个列子中不可用，同样也适用于其他空元素，例如：d5fd7aea971a85678ba271703566ebfd。
可怕的浏览器兼容性

任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。

浏览器支持:before 和 :after 伪元素栈，像这样：

    Chrome 2+,
    Firefox 3.5+ (3.0 had partial support),
    Safari 1.3+,
    Opera 9.2+,
    IE8+ (with some minor bugs),
    几乎所有的移动浏览器。

唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。所以，如果你的爱好者是在良好合适的web开发（或者其他具有较低IE版本的市场），你可以继续自由地使用伪元素。
伪元素不是决定性的

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

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

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

（更新：在评论中提到的，你可以使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出现在DOM元素里。同时，火狐在1.8版加入伪元素支持它。）

你所需要用有的理念是用这个技术以创造出实用的东西。与此同时，将来进一步研究CSS伪元素，一定要看看我们已经链接的一些文章。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

關於CSS中的before和:after偽元素的使用分析

相關文章