How to increase the space between the text and underline under a hyperlink in CSS?

Question

For any text and underline, we can use line-height and padding-bottom. But in my case i have used hyperlinks, so when i hover over the hyperlink i want the text-decoration underline to increase the spacing between the hyperlink text and underline?

looking forwards for some answers for this.

No, you can't use with the default href. You can customize the link tag and use it as you want — Abin Thaha, Oct 24 '21 at 13:10

score 0 · Answer 1 · answered Oct 24 '21 at 13:15

As you can see in the below snippet,

I created a custom link with the way you were looking for, check it out and let me know in case if you require further assistance.

.custom {
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.custom::after {
  content: '';
  display: inline-block;
  width: 100%;
  left: 0;
  height: 1px;
  position:absolute;
  background-color: rgb(0, 0, 238);
  bottom: -2px;
}

<h2>Normal Link</h2>
<a href="google.com">Hello</a>
<h2>Custom Link</h2>
<a href="google.com" class='custom'>Hello</a>

How to increase the space between the text and underline under a hyperlink in CSS?

1 Answers1