css点击文字后出现

CSS 点击文字后出现的效果是网页中常见的一种交互方式，通过设置伪类元素，可以实现点击文字后出现不同的样式效果。

p {
  position: relative;
}
p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
 /* 使元素不可点击 */
  transition: opacity 0.3s ease;
 /* 渐变效果 */
}
p:hover::after {
  opacity: 1;
  pointer-events: auto;
 /* 恢复元素可点击 */
}
 

上面的代码示例中，::after 伪类元素设置了一个半透明的黑色背景，在默认情况下是不可见的，通过:hover 接触到元素时实现透明度的变化，使背景颜色出现在页面上。

这种效果不仅可以使用黑色背景实现，也可以用图片或者其他样式代替，只需要对伪类元素进行相应的修改即可。

可以根据实际需要进行调整，例如修改背景颜色、边框大小、圆角等，以实现更加个性化的点击效果。