Text decoration too long

h1 {
  /* A nice big spacing so you can see the effect */
  letter-spacing: 1em;
  /* we need relative positioning here so our pseudo element stays within h1's box */
  position: relative;
  /* centring text throws up another issue, which we'll address in a moment */
  text-align: center;
  /* the underline */
  text-decoration: underline;
}

h1:after {
  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 1em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #990000;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -1em;
}

<h1>My letter-spaced, underlined element!</h1>

Source: stackoverflow.com

Text decoration too long

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

Source: stackoverflow.com

Similar codes

2 votes127 views1 answer
How to style multiple elements at once
CSS
3 votes147 views2 answers
Bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
CSS Bootstrap
0 vote135 views1 answer
SCSS Auto link coloured button style
CSS
-1 vote179 views1 answer
How to write a comment in css
CSS
0 vote121 views1 answer
Hide featured image in wordpress
CSS
109 votes123 views6 answers
Position absolute
CSS
1 vote116 views2 answers
Media max height css
CSS
0 vote118 views1 answer
Add padding to gnome terminal
CSS
22 votes108 views2 answers
Disable highlight css
CSS
0 vote118 views1 answer
How create checkbox ui like disabled checkbox using css
CSS