每個(gè)<p>元素之后插入內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(cainiaoplus.com)</title>
<style>
p:after
{
content:"- 標(biāo)記我";
}
</style>
</head>
<body>
<p>我的名字是 麗麗</p>
<p>我住在 海邊</p>
<p><b>注意:</b> :after在IE8中運(yùn)行,必須聲明 !DOCTYPE </p>
</body>
</html>測(cè)試看看 ?/?:after 選擇器向選定的元素之后插入內(nèi)容。
使用content 屬性來(lái)指定要插入的內(nèi)容。
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| 選擇器 | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 部分從 8.0 | 3.5 | 3.1 | 7.0 部分從4.0 |
注意: after在IE8中運(yùn)行,必須聲明<!DOCTYPE> .
CSS 教程: CSS Pseudo-elements
CSS 選擇器參考手冊(cè): CSS :before 選擇器
在每個(gè) <p>之后插入的內(nèi)容和樣式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(cainiaoplus.com)</title>
<style>
p:after
{
content:"- 標(biāo)記";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>我的名字是 麗麗</p>
<p>我住在 海邊</p>
<p><b>注意:</b> :after在IE8中運(yùn)行,必須聲明 !DOCTYPE </p>
</body>
</html>測(cè)試看看 ?/?