标签（空格分隔）： 伪元素
介绍常用的伪元素：
设置第一个首字母的样式：
first-letter
例如：
p:first-letter {
font-size: 48px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p>woshiyie duandua </p>
</body>
</html>
before
用于在元素的内容前面插入新内容。结合content使用，使用不是很频繁;
p:before {
content: "*";
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter{
color:red;
font-size: 30px;
}
/*结合content使用，在。。。之前添加内容，使用不是很频繁*/
p:before{
content:'lll';
}
</style>
</head>
<body>
<p>woshiyie duandua </p>
</body>
</html>
after
使用比较频繁，建议掌握；
用于在元素的内容后面插入新内容。如下是在最后加入：&符号，代码如下
p:after {
content: "?";
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter{
color:red;
font-size: 30px;
}
/*结合content使用，在。。。之前添加内容，使用不是很频繁*/
p:before{
content:'lll';
}
/*经常使用*/
p:after{
content:'&';
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>woshiyie duandua </p>
</body>
</html>
