Question 268590 in Html Question posted in
Some basic documentation can be found here.

Html – How to style a wrapping anchor element?

I have an anchor element that is styled. This works fine until the anchor wraps onto the next line. Then it only applies that style to the vertical intersection of both lines. How can I apply the styling so it wraps on both lines?

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>
Tags:

2

Answers


  1. 0

    Try this :-

    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>
    Login or Signup to reply.
  2. 0

    Use gradient

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search