CSS : 文字下划线效果

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>

body

<span class="del_text">文字</span>

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可