CODEWITHSUNDEEP
css
bradley.ayers
bradley.ayers

Reputation: 38392

Add a space (" ") after an element using :after

I want to add a blank space after some content, however the content: " "; doesn't seem to work.

This is my code:

h2:after {
    content: " ";
}

... which doesn't work, however this does:

h2:after {
    content: "-";
}

What am I doing wrong?

Upvotes: 345

Views: 248672

Answers (7)

humairah codes
humairah codes

Reputation: 32

Use the following code, it will add space to the content pseudo element and also keep the spacing.

content: "attr";

Upvotes: 0

TerrorBight
TerrorBight

Reputation: 313

try...

<span>first part</span>
<span>&nbsp;&#8203;</span>
<span>second part</span>

..."&#8203;" (or "&ZeroWidthSpace;") allows "first part" and "second part" to wrap if necessary

Upvotes: 1

Rucha
Rucha

Reputation: 1

element::after { 
    display: block;
    content: " ";
}

This worked for me.

Upvotes: -5

user2581182
user2581182

Reputation: 11

There can be a problem with "\00a0" in pseudo-elements because it takes the text-decoration of its defining element, so that, for example, if the defining element is underlined, then the white space of the pseudo-element is also underlined.

The easiest way to deal with this is to define the opacity of the pseudo-element to be zero, eg:

element:before{
  content: "_";
  opacity: 0;
}

Upvotes: -3

bradley.ayers
bradley.ayers

Reputation: 38392

Turns out it needs to be specified via escaped unicode. This question is related and contains the answer.

The solution:

h2:after {
    content: "\00a0";
}

Upvotes: 698

Oriol
Oriol

Reputation: 288710

Explanation

It's worth noting that your code does insert a space

h2::after {
  content: " ";
}

However, it's immediately removed.

From Anonymous inline boxes,

White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.

And from The 'white-space' processing model,

If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.

Solution

So if you don't want the space to be removed, set white-space to pre or pre-wrap.

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}
<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

Do not use non-breaking spaces (U+00a0). They are supposed to prevent line breaks between words. They are not supposed to be used as non-collapsible space, that wouldn't be semantic.

Upvotes: 217

don.aymar
don.aymar

Reputation: 101

I needed this instead of using padding because I used inline-block containers to display a series of individual events in a workflow timeline. The last event in the timeline needed no arrow after it.

Ended up with something like:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

Used fontawesome for the gt (chevron) character. For whatever reason "content: none;" was producing alignment issues on the last tile.

Upvotes: 10

Related Questions