CSS:before选择器用法

div+css

1、:before 选择器在被选元素的内容前面插入内容。用 content 属性来指定要插入的内容。

p:before
 {
 content:"台词：";
 }

例子：

<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
</html>

显示结果：

台词：我是唐老鸭。

台词：我住在 Duckburg。

台词：注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。

2、在每个 <p> 元素前面插入内容，并设置所插入内容的样式：

p:before
{ 
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}

3、:after同理，表示在p元素后插入内容

p:after
 {
 content: "内容";
 }

下面的例子在每个链接后插入括号中的 URL：

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