伪元素是什么
伪元素一般有两种使用场景：
1. 利用CSS直接在HTML中添加元素
利用伪元素添加的HTML元素一般起装饰作用。能够实现这种效果的伪元素只有两个，也就是我们最常用的::after和::before。一个常见的使用场景是给表单中必填项的标签添加星号。
<style>
.required::after {
color: red;
content: '*';
}
</style>
<body>
<label class="required">姓名</label>
<input type="text" required>
</body>
2. 对HTML元素的特定部分进行修改
这里说的特定部分可以是每个段落的第一个字::first-letter或者第一行::first-line。
p::first-letter {
font-size: 125%;
font-weight: bold;
color: red;
}
p::first-line {
text-transform: uppercase;
}
上述代码的效果如图所示，可以看到段落的第一个字被放大加粗并改变了颜色，而段落的第一行被转换成了大写字母。
还有对被选中文本样式进行修改的::selection。
p::selection {
background-color: red;
color: white;
}
用伪元素写一个纯css的tooltip（提示框）
tooltip就是当我们hover页面中的某些元素时，网页会弹出的提示框或者菜单选项，比如掘金的文本编辑器右上角的这个按钮就有一个tooltip。
图中的“切换为富文本编辑器”就是一个tooltip。通过给页面添加tooltip，可以给用户更多的操作提示，页面的交互性也会变得更强，有利于提供良好的用户体验。而这样的tooltip，是可以利用纯CSS实现的，其本质就是给按钮添加一个after伪元素。废话少说，直接上代码。
<button data-tooltip="点击提交">提交</button>
首先我们在HTML中添加一个button元素，给元素添加data-tooltip属性来表示这个按钮会有一个tooltip，且tooltip的内容为“点击提交”。
[data-tooltip]:hover::after {
content: attr(data-tooltip);
padding: 2.5px;
border-radius: 5px;
background-color: gray;
color: white;
}
然后我们对tooltip的内容进行定制。利用[data-tooltip]选择器选中需要提示框的按钮，同时添加:hover伪类，因为只有按钮被hover时我们才希望tooltip出现。最后用::after伪类来插入我们的tooltip。
我们设置了tooltip的内容为选中元素的data-tooltip属性值，然后添加了圆角、内边距并设置了字体颜色、背景颜色和宽度来让它更加美观。
在浏览器中查看效果，会发现tooltip的外观已经符合我们的预期，但是它直接跟在了按钮的文本后面，打开控制台我们发现::after伪元素默认被放置于button的文本后面，而且它默认是一个inline元素，所以才会有这种效果。因此我们需要对伪元素的位置进行一些调整，让它可以正好出现在按钮的正下方。（这里出现黄点是因为button被我用开发者工具强制设定为了hover状态。）
[data-tooltip] {
position: relative;
}
[data-tooltip]:hover::after {
padding: 2.5px;
border-radius: 5px;
background-color: gray;
color: white;
content: attr(data-tooltip);
/* 以下是定位相关的属性声明 */
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 5px;
}
我们可以利用绝对定位来达到我们想要的效果。首先设置父元素button的定位为relative，然后设置::after伪元素为绝对定位，也就是相对于父元素的位置进行定位。我们希望它处于正下方，所以用top: 100%令其向下偏移一整个父元素的高度，然后设置左右偏移都为0实现自动居中。最后添加一点点上边距让效果更加美观。
现在这个tooltip就被我们稳稳地放到按钮下方了！但如果我们能把它弄成一行的就更美观了，这需要我们再添加两个属性。
width: 200%;
transform: translateX(-25%);
设置宽度为原来的两倍，就可以把四个字都放在一行里面了！但是这样会导致我们的提示框在右边多出来一半，所以我们得把它往左偏移四分之一，这样就实现了一个美观的纯CSS tooltip了！
参考链接：
blog.webdevsimplified.com/2021-12/css… developer.mozilla.org/zh-CN/docs/…
