成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。
CSS3增加了伪元素特性。
伪元素表示虚拟动态创建的元素。
伪元素用双冒号表示。
::begore
::before创建一个伪元素，这个伪元素会成为选中的元素的第一个子元素。
注意：::before创建的伪元素，必须给它设置一个content属性，content属性表示这个伪元素的内容。
比如下面的代码：
a元素后面跟了一个::before，
就表示在所有的a标签里面，都给它创建了一个伪元素，
创建的这个伪元素是a标签的第一个子元素。
这个伪元素的属性content，是一个五角星。
这样，就会在页面上每一个a标签的内容最前面，加一个五角星。
::after
::after创建一个伪元素，这个伪元素会成为选中的元素的最后一个子元素。
同样的：::after创建的伪元素，必须给它设置一个content属性，content属性表示这个伪元素的内容。
接下来我在vscode和浏览器中演示一下::before和::after这两个伪元素。我创建一个叫"伪元素.html"的文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
a::before {
/* 在a标签本身的文字之前添加一个梅花 */
content: "♣";
}
a::after {
/* 在a标签本身的文字之前添加一个心 */
content: "❤";
}
</style>
</head>
<body>
<p>
<a href="">去优酷网</a>
</p>
<p>
<a href="">去爱奇艺</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
</body>
</html>
我给a::before的属性content设为一个梅花图案，
表示在所有的a标签的内容前面添加一个梅花图案，
给a::after的属性content设为一个心形图案，
表示在所有的a标签的内容后面添加一个心形图案。
以上代码在浏览器中效果如下：
::selection
::selection创建一个伪元素，这个伪元素应用于文档中被用户高亮的部分(按住鼠标选中的部分)。
我继续在"伪元素.html"这个文件中写新的代码，来演示::selection这个伪元素的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
a::before {
/* 在a标签本身的文字之前添加一个梅花 */
content: "♣";
}
a::after {
/* 在a标签本身的文字之前添加一个心 */
content: "❤";
}
.box1 {
width: 300px;
height:200px;
border: 1px solid black;
}
.box1::selection {
color: red;
background-color: gold;
}
</style>
</head>
<body>
<p>
<a href="">去优酷网</a>
</p>
<p>
<a href="">去爱奇艺</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
<div class="box1">
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。
</div>
</body>
</html>
我写了一个类名叫box1的div，在这个div中写了一段文字。给这个div设置了一个黑色边框，宽度300像素，高度200像素。
在默认情况下，我们选中这个div中的文字时，会显示蓝色的背景和白色的文字，如下图所示：
但是当我们给这个div添加了伪元素::selection时，我们就可以给这个伪元素设置新的样式，比如我上面的代码中，给它设置的样式是：文字颜色红色，背景颜色金色。
也就是说，此时当我们再选中这个div中的文字时，文字就变成了红色，背景就变成了金色。
现在明白::selection这个伪元素是干什么的了吧！它就是用来设置用户按住鼠标选中的内容的样式的。
::first-letter和::first-line
::first-letter会选中元素(必须是块级元素)中第一行的第一个字母。
::first-line会选中元素(必须是块级元素)中第一行的全部文字。
关于块级元素的概念，后面会学习到。
::first-letter和::first-line这两个伪元素一般在英文网站中用的比较多，因为英文中经常会出现第一个字母大写等现象，就需要这两个伪元素来设置样式。
我继续在"伪元素.html"这个文件中写新的代码，来演示::first-letter和::first-line这两个伪元素的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
a::before {
/* 在a标签本身的文字之前添加一个梅花 */
content: "♣";
}
a::after {
/* 在a标签本身的文字之前添加一个心 */
content: "❤";
}
.box1 {
width: 300px;
height:200px;
border: 1px solid black;
}
.box1::selection {
color: red;
background-color: gold;
}
.box1::first-line {
/* 在文字下面添加下划线 */
text-decoration: underline;
}
.box1::first-letter {
font-size: 60px;
}
</style>
</head>
<body>
<p>
<a href="">去优酷网</a>
</p>
<p>
<a href="">去爱奇艺</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
<div class="box1">
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。
</div>
</body>
</html>
box1::first-line这个伪元素，就是选中box1这个div中的第一行文字，我这里给它添加的属性是：text-decoration：underline;
还记得text-decoration这个属性吗？就是文字装饰的意思，underline，就是下划线的意思。
box1::first-letter这个伪元素，就是选中box1这个div中的第一行的第一个字母。我这里给它的属性是：font-size：60px；即文字尺寸设为60像素。
当我们没有给页面的文字设置字体大小时，浏览器会以默认的大小显示文字，这里我给第一个字母设置为60像素，明显就比默认要大很多。
以上代码在浏览器中显示效果如下：
以上就是常见的伪元素。
感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！
温馨提示：我在头条关于前端的图文，都是成体系的，如果是没接触过前端，对前端感兴趣、想要学习前端的小伙伴，要按顺序从第一节去看，更重要的是要动手实践。
,
