CSS扩展文本超链接及其下划线之间的空间

Question

Is there a way to expand the space between letters and underlines in text-based hyperlinks using CSS?

The CSS I'm planning to use is:

.post-body a {
  text-decoration: underline;
}

My blog is hosted on Blogger and uses the Simple template - http://nickalive.blogspot.com

Answer 1

No, not using standard text-decoration settings.

What you can do is replace the underline with a pseudo-element which you can customise to your heart's content.

 a { text-decoration:none; margin:1em; display: inline-block; position: relative; } a:after { content:""; position: absolute; left:0; bottom:-12px; /* changes distance from text */ width:100%; /* width of underline */ height:5px; /* height of underline */ background: red; /* color or underline */ } 

 <a href="#">My hyperlink</a> 

Text-Decoration @ MDN