在悬停时添加文本内容 - CSS

在CSS中可以通过伪类选择器 :hover，在元素悬停时添加额外的文本内容。

实现方法

使用 :hover 伪类选择器，结合 content 属性即可实现在悬停时添加文本内容。例如：

.element:hover::after {
  content: "这是在悬停时添加的文本内容";
}

以上代码会在元素 .element 悬停时在其后添加文本内容。可以通过 ::after 伪元素选择器，将文本内容添加在元素后面。

为了更好的显示效果，添加一些样式：

.element {
  position: relative;
}

.element:hover::after {
  content: "这是在悬停时添加的文本内容";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: #333;
  color: #FFF;
  border-radius: 4px;
  white-space: nowrap;
}

以上代码中，文本内容使用 ::after 伪元素选择器添加到元素 .element 后面，并设置为块级元素 display: block;，要用到绝对定位 position: absolute;，将文本内容放在元素底部，水平方向居中对齐 left: 50%; transform: translateX(-50%);，设置内边距 padding: 10px;、背景颜色 background-color: #333;、文本颜色 color: #FFF;、圆角 border-radius: 4px; 和文本不换行 white-space: nowrap;。

使用场景

常见的场景有：为链接添加提示信息、为图片添加标题等。

例如为链接添加提示信息：

<a href="#"
  class="link" 
  title="这是一个链接，点击跳转。">链接</a>

.link:hover::after {
  content: attr(title);
  /* ... 样式设置 ... */
}

以上代码会在链接 .link 悬停时，显示 title 属性的文本内容。

总结

在悬停时添加文本内容是利用CSS伪类选择器 :hover，结合 content 属性实现的。可以通过样式设置，实现文本内容的样式效果。在链接等元素上添加文本内容，可以为用户提供更好的交互体验。