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?
This question is related to
css
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.
So if you don't want the space to be removed, set white-space to pre or pre-wrap.
h2 {_x000D_
text-decoration: underline;_x000D_
}_x000D_
h2.space::after {_x000D_
content: " ";_x000D_
white-space: pre;_x000D_
}<h2>I don't have space:</h2>_x000D_
<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.
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.
Turns out it needs to be specified via escaped unicode. This question is related and contains the answer.
The solution:
h2:after {
content: "\00a0";
}
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;
}
element::after {
display: block;
content: " ";
}
This worked for me.
Source: Stackoverflow.com