CSS decrease space between text and border

Question

When hovering a link I want it to get an underline. The underline should be 2px strong and 4px below the text.

With

text-decoration: underline
         


        

Answer 1

Multi line solution

Explanation. I'm creating a sibling which has the same text and text style and is shifted to top a bit. If you want to keep your code clean you can insert the sibling using JS on a page load event.

Restrictions. This solution doesn't work inside paragraph of text.

.underlined_link {
  text-decoration: none;
  display: inline;
}
.underlined_link h2,
.underlined_link div {
  display: inline;
  font-size: 20px;
  margin: 0;
  line-height: 35px;
  font-weight: normal;
  padding: 0;
}
.underlined_link h2 {
  color: transparent;
  border-bottom: 1px solid red;
}
.underlined_link div {
  position: absolute;
  top: 10px;
  left: 8px;
}

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.