每個 <p>元素之前插入內(nèi)容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>我的名字叫蘿莉</p>
<p>我生活在海邊</p>
<p><b>注意:</b> :before 作用于 IE8,DOCTYPE 必須已經(jīng)聲明.</p>
</body>
</html>測試看看 ?/?:before 選擇器向選定的元素前插入內(nèi)容。
使用content 屬性來指定要插入的內(nèi)容。
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 選擇器 | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 部分從8.0 | 3.5 | 3.1 | 7.0 部分從 4.0 |
注意: before在IE8中運(yùn)行，必須聲明 <!DOCTYPE> 。
CSS 教程: CSS Pseudo-elements
CSS 選擇器參考手冊: CSS :after 選擇器
在每個<p>之前插入的內(nèi)容和樣式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style>
p:before
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
</style
</style>
</head>
<body>
<p>我的名字叫蘿莉</p>
<p>我生活在海邊</p>
<p><b>注意:</b> :before 作用于 IE8,DOCTYPE 必須已經(jīng)聲明.</p>
</body>
</html>測試看看 ?/?