css 如何设置 Package 锚元素的样式？

c2e8gylq 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(101)

我有一个样式化的锚元素。在锚绕到下一行之前，此操作一直正常工作。然后，它只将该样式应用于两条线的垂直交点。如何应用样式使其在两条线上换行？

a {
  text-decoration: none;
  word-wrap: break-word;
  position: relative;
  border: 1px black solid
}

a:hover::before {
  bottom: 0;
  height: 95%;
}

a::before {
  content: '';
  background: orange;
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 6px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

<a href="">How can I apply the styling so it wraps on both lines?</a>
<br><br>
<a href="">How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines?</a>

css

来源：https://stackoverflow.com/questions/77326189/how-to-style-a-wrapping-anchor-element

2条答案

按热度按时间

6ju8rftf1#

使用渐变

a {
  text-decoration: none;
  word-wrap: break-word;
  border: 1px black solid;  
  background: linear-gradient(orange 0 0) left 0 bottom 3px/100% 6px no-repeat
}

<a href="">How can I apply the styling so it wraps on both lines?</a>
<br><br>
<a href="">How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines?</a>

赞(0）回复(0）举报 2023-10-21

gupuwyp22#

试试这个：-

a {
  text-decoration: none;
  word-wrap: break-word;
  position: relative;
  border: 1px black solid;
  display: inline-block;
}

a:hover::before {
  bottom: 0;
  height: 95%;
}

a::before {
  content: '';
  background: orange;
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 6px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

<a href="">How can I apply the styling so it wraps on both lines?</a>
<br><br>
<a href="">How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines?</a>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何设置 Package 锚元素的样式？

2条答案

相关问题

热门标签

最新问答