CSS :before 選擇器,是什么意思以及用法
CSS:before選擇器
完整CSS選擇器參考手冊
定義和用法
:before 選擇器向選定的元素前插入內容。
:before是偽元素,并且它生成包含放置在元素中的內容之前的生成內容的偽元素。
使用content 屬性來指定要插入的內容。
默認情況下,生成的偽元素是內聯的,但這可以使用屬性顯示更改。
例子:
a[href]:before {content: "[LINK]";) p:before {content: attr(class);}
實例
實例 1
每個 <p>元素之前插入內容:
p:before
{
content:"Read this: ";
}
{
content:"Read this: ";
}
實例 2
在每個<p>之前插入的內容和樣式:
p:before
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
選擇器 | |||||
---|---|---|---|---|---|
::before | 4.0 | 9.0 部分從8.0 | 3.5 | 3.1 | 7.0 部分從 4.0 |
注意:before在IE8中運行,必須聲明 <!DOCTYPE> 。
相關文章
CSS 教程: CSS Pseudo-elements
CSS 選擇器參考手冊: CSS :after 選擇器
完整CSS選擇器參考手冊