1.:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。格式如下:
<元素>:before{
content:文字/url();
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器的应用</title>
<style type="text/css">
p:before{
content:"网页设计";
color:#c06;
font-size:20px;
font-family:"微软雅黑";
font-weight:bold;
}
</style>
</head>
<body>
<p>是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。</p>
</body>
</html>
使用了选择器“:before”,用于在段落前面添加内容,同时使用content属性来指定添加的具体内容。
2.after选择器
:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>after选择器的使用</title>
<style type="text/css">
p:after{content:url(images/u=336598192,1743945888&fm=73&s=98C27A2396705F86083DF5CB0100E091.jpg)}
</style>
</head>
<body>
<p>书本<br /></p>
</body>
</html>