CSS :before 選擇器

2018-01-06 11:25 更新

CSS :before 選擇器

CSS完整選擇器完整CSS選擇器參考手冊(cè)

定義和用法

:before 選擇器向選定的元素前插入內(nèi)容。

:before是偽元素,并且它生成包含放置在元素中的內(nèi)容之前的生成內(nèi)容的偽元素。

使用content 屬性來指定要插入的內(nèi)容。

默認(rèn)情況下,生成的偽元素是內(nèi)聯(lián)的,但這可以使用屬性顯示更改。

例子:

a[href]:before  {content: "[LINK]";) 
p:before {content: attr(class);} 

Examples

實(shí)例

實(shí)例 1

每個(gè) <p>元素之前插入內(nèi)容:

p:before
{
  content:"Read this: ";
}

嘗試一下 ?

實(shí)例 2

在每個(gè)<p>之前插入的內(nèi)容和樣式:

p:before
{
  content:"Read this -";
  background-color:yellow;
  color:red;
  font-weight:bold;
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

選擇器          
::before 4.0 9.0
部分從8.0
3.5 3.1 7.0
部分從 4.0

注意: before在IE8中運(yùn)行,必須聲明 <!DOCTYPE> 。


相關(guān)文章

CSS 教程: CSS Pseudo-elements

CSS 選擇器參考手冊(cè): CSS :after 選擇器


CSS完整選擇器完整CSS選擇器參考手冊(cè)

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)