CSS伪元素学习-写一个纯css的tooltip

伪元素是什么

伪元素一般有两种使用场景：

1. 利用 CSS 直接在 HTML 中添加元素

利用伪元素添加的 HTML 元素一般起装饰作用。能够实现这种效果的伪元素只有两个，也就是我们最常用的::after和::before。一个常见的使用场景是给表单中必填项的标签添加星号。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<style>
  .required::after {
    color: red;
    content: "*";
  }
</style>

<body>
  <label class="required">姓名</label>
  <input type="text" required />
</body>

2. 对 HTML 元素的特定部分进行修改

这里说的特定部分可以是每个段落的第一个字::first-letter或者第一行::first-line。

1
2
3
4
5
6
7
8
9
p::first-letter {
  font-size: 125%;
  font-weight: bold;
  color: red;
}

p::first-line {
  text-transform: uppercase;
}

上述代码的效果如图所示，可以看到段落的第一个字被放大加粗并改变了颜色，而段落的第一行被转换成了大写字母。

还有对被选中文本样式进行修改的::selection。

1
2
3
4
p::selection {
  background-color: red;
  color: white;
}

用伪元素写一个纯 css 的 tooltip（提示框）

tooltip就是当我们hover页面中的某些元素时，网页会弹出的提示框或者菜单选项，比如掘金的文本编辑器右上角的这个按钮就有一个tooltip。

图中的“切换为富文本编辑器”就是一个tooltip。通过给页面添加tooltip，可以给用户更多的操作提示，页面的交互性也会变得更强，有利于提供良好的用户体验。而这样的tooltip，是可以利用纯 CSS 实现的，其本质就是给按钮添加一个after伪元素。废话少说，直接上代码。

1
<button data-tooltip="点击提交">提交</button>

首先我们在 HTML 中添加一个button元素，给元素添加data-tooltip属性来表示这个按钮会有一个tooltip，且tooltip的内容为“点击提交”。

1
2
3
4
5
6
7
[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状态。）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[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就被我们稳稳地放到按钮下方了！但如果我们能把它弄成一行的就更美观了，这需要我们再添加两个属性。

1
2
width: 200%;
transform: translateX(-25%);

设置宽度为原来的两倍，就可以把四个字都放在一行里面了！但是这样会导致我们的提示框在右边多出来一半，所以我们得把它往左偏移四分之一，这样就实现了一个美观的纯 CSS tooltip 了！

参考链接：

https://blog.webdevsimplified.com/2021-12/css-pseudo-elements/ https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements