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.

Answer 1

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>