CSS How to fit the bottom-border to a link with letter-spacing

Question

I have a link where the text has some letter-spacing. Now the bottom border goes further than the link because of that. How can I avoid that e.g. how can I make the bottom border fit to the link text?

<a href="#">LINK</a>

css:

a { 
   letter-spacing: 3px;
   font-size: 30px;
   border-bottom: 2px solid orange;
   text-decoration: none
 }

FIDDLE

@Rob use 100px, you'll see it. Here: https://jsfiddle.net/90znr57h/4/ — Wesley Murch, Jan 31 '18 at 14:34
@Rob he's talking about the normal behavior ;) he don't like that normal space after the last letter — Temani Afif, Jan 31 '18 at 14:38
@TemaniAfif He's talking about the border under the text, not after the text. — Rob, Jan 31 '18 at 14:40
@Rob yes i mean the border under the last letter that is under the space after the last letter — Temani Afif, Jan 31 '18 at 14:40
@Rob i agree with you because it's not an issue :) this is the normal behavior of letter spacing but he doesn't like it. He want the border to end exactly under the last letter and don't consider the space added by letter spacing. — Temani Afif, Jan 31 '18 at 14:50

chriskirknielsen · Accepted Answer · 2018-01-31T14:53:10.303

2

The only way to overcome this issue is to hack your way through it: by wrapping your text in a span we can remove 3px on the right with a negative margin:

a {
  font-size: 30px;
  border-bottom: 4px solid green;
  letter-spacing: 3px;
  text-decoration: none;
}

span {
  display: inline-block;
  margin-right: -3px;
}

<a href="#"><span>LINK</span></a>

edited Jan 31 '18 at 14:53

answered Jan 31 '18 at 14:37

chriskirknielsen

2,839
2
14
24

Put your markup within your question, not a jsfiddle. Links go dead and your answer will be useless to anyone in the future. https://stackoverflow.com/help/how-to-answer – Rob Jan 31 '18 at 14:41
`this issue` : it's not an issue – Temani Afif Jan 31 '18 at 14:41
@Rob, my markup is within my answer, in a snippet, but thanks. – chriskirknielsen Jan 31 '18 at 14:46
You have an "updated fiddle". Is that the same as the snippet and example markup? – Rob Jan 31 '18 at 14:47
@Rob, my snippet and fiddle share the exact same code. – chriskirknielsen Jan 31 '18 at 14:49
Then there is no need for the jsfiddle link. – Rob Jan 31 '18 at 14:50
1

@Rob Sure, there, it's edited. Good day. – chriskirknielsen Jan 31 '18 at 14:53

CSS How to fit the bottom-border to a link with letter-spacing

1 Answers1