制作 :before 内容在必要时换行到下一行

Question

我正在对我的锚标签进行样式化并使用 :before pseudo class。问题是如果 link 换行到下一行，则 :hover 效果下划线内容不会换行到下一行。关于如何实现这一目标的任何建议？谢谢

CSS:

a {
  background: #da1207;
  background: -webkit-linear-gradient(to right, #da1207 0%, #e89705 100%);
  background: -moz-linear-gradient(to right, #da1207 0%, #e89705 100%);
  background: linear-gradient(to right, #da1207 0%, #e89705 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  padding: 0;
  border: 0 none;
  position: relative;
  outline: none;

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: rgb(217, 7, 7);
  background: linear-gradient(
    90deg,
    rgba(217, 7, 7, 1) 0%,
    rgba(248, 229, 143, 0.9135855025603992) 100%
  );
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: 0.25s linear;
}
a:hover:before,
a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

Answer 1

您可以在嵌套内联元素上使用背景来解决此问题，但您不会有边框半径：

a {
  background: 
    linear-gradient(90deg, rgba(217, 7, 7, 1), rgba(248, 229, 143, 1)) 
    bottom left/0% 3px no-repeat;
  padding-bottom:3px;
  line-height:1.4em;
  transition: 0.25s linear;
  text-decoration:none;
}

a span {
  background: #da1207;
  background: linear-gradient(to right, #da1207 0%, #e89705 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a:hover {
  background-size: 100% 3px;
}

<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque nec eros vitae viverra. Nunc ut dui eget ligula egestas consequat non sed magna. E</span></a>

制作 :before 内容在必要时换行到下一行

Making :before content wrap onto next line when necessary

css

pseudo-element