text decoration too long

1h1 {
2  /* A nice big spacing so you can see the effect */
3  letter-spacing: 1em;
4  /* we need relative positioning here so our pseudo element stays within h1's box */
5  position: relative;
6  /* centring text throws up another issue, which we'll address in a moment */
7  text-align: center;
8  /* the underline */
9  text-decoration: underline;
10}
11
12h1:after {
13  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
14  position: absolute;
15  /* the same width as our letter-spacing property on the h1 element */
16  width: 1em;
17  /* 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 */
18  height: 200%;
19  /* 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 ;) */
20  background-color: #990000;
21  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
22  content: ".";
23  /* hide the dynamic text you've just added off the screen somewhere */
24  text-indent: -9999em;
25  /* this is the magic part - pull the mask off the left and hide the underline beneath */
26  margin-left: -1em;
27}
28
29<h1>My letter-spaced, underlined element!</h1>

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