Breaking News: Grepper is joining You.com. Read the official announcement!

text decoration too long

AaronKanaron answered on July 11, 2021 Popularity 3/10 Helpfulness 1/10

answer text decoration too long

related text decoration too long

text decoration too long

Comment

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>

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css decoration text

Link to this answer
Share Copy Link

Contributed on Jul 11 2021

AaronKanaron

0 Answers Avg Quality 2/10

Closely Related Answers

text decoration too long

Comment

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

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: text css decoration

Link to this answer
Share Copy Link

Contributed on Jul 11 2021

AaronKanaron

0 Answers Avg Quality 2/10

text decoration too long

Contents

More Related Answers

text decoration too long

Closely Related Answers

text decoration too long

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.