CSS : 文字下划线效果

最新推荐文章于 2024-04-10 09:16:02 发布

原创最新推荐文章于 2024-04-10 09:16:02 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种利用CSS伪元素:before实现鼠标悬停时的文字删除线效果，并使用了过渡动画增强视觉体验。通过简单的HTML结构配合CSS样式，可以轻松创建动态的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

<style>
.del_text {
  position: relative;
  z-index: 1;
}

.del_text::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -0.25em;
  right: -0.25em;
  background-color: #5d3131;
  transform-origin: bottom center;
  transform: scaleY(0.1);
  transition: all 0.1s ease-in-out;
}

.del_text:hover::before {
  transform: scaleY(1);
  background-color: hsla(341, 97%, 59%, 0.75);
}
</style>