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

0 vote126 views1 answer
Flex index css
CSS
4 votes116 views3 answers
Css moz webkit generator
CSS
0 vote111 views1 answer
How to make img cover parent div
CSS
53 votes122 views6 answers
Background color in css
CSS
152 votes162 views6 answers
How to add bold in css
CSS
2 votes139 views2 answers
OSX Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
CSS
1 vote108 views1 answer
Ionic ios remove button appearance
CSS
0 vote122 views1 answer
Override root css variables
CSS
0 vote125 views1 answer
Font-display css google fonts
CSS
3 votes115 views1 answer
Trash icon in fontawesome
CSS