伪元素选择器
1、first-line伪元素选择器
某个元素中第一行文字使用的样式
2、first-letter伪元素选择器
某个元素中文字的首字母（欧美文字）或者第一个字（中文或日文等汉字）的使用样式
3、before伪元素选择器
在某个元素之前插入一些内容
4、after伪元素选择器
在某个元素之后插入一些内容
eg.
<!DOCTYPE html>
<head>
<meta charset = "UTF-8" />
<title>伪元素选择器</title>
<style type="text/css">
p:first-line{color:red;}
div:first-letter{font-size:larger;}
li:before{content:"@";}
div li:after{content:"after test";}
</style>
</head>
<body>
<p>第一行<br />第二行</p>
<div>很久很久以前。。。</div>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<div>
<ul>
<li><a href="1.mp3">1</a></li>
<li><a href="2.mp3">2</a></li>
<li><a href="3.mp3">3</a></li>
</ul>
</div>
</body>
<head>
<meta charset = "UTF-8" />
<title>伪元素选择器</title>
<style type="text/css">
p:first-line{color:red;}
div:first-letter{font-size:larger;}
li:before{content:"@";}
div li:after{content:"after test";}
</style>
</head>
<body>
<p>第一行<br />第二行</p>
<div>很久很久以前。。。</div>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<div>
<ul>
<li><a href="1.mp3">1</a></li>
<li><a href="2.mp3">2</a></li>
<li><a href="3.mp3">3</a></li>
</ul>
</div>
</body>
</html>
效果图：
