CSS Space Before Selector

CSS space before selector

The space between simple selectors is a descendant combinator in CSS. If it were two ordinary selectors separated with space, it would mean 'element matching the second selector, placed anywhere inside the element matching the first selector'. Since the second selector is a pseudo element, the whole selector is equivalent to .label-hi *:before, potentially inserting something into any element inside the element with class label-hi.

How can I add white space before an element's content using CSS?

You can use the Unicode code point of a non-breaking space:

p:before { content: "\00a0 "; }

See JSfiddle demo (style improved by Jason Sperske).

Add a space ( ) after an element using :after

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>

CSS space before selector

The space between simple selectors is a descendant combinator in CSS. If it were two ordinary selectors separated with space, it would mean 'element matching the second selector, placed anywhere inside the element matching the first selector'. Since the second selector is a pseudo element, the whole selector is equivalent to .label-hi *:before, potentially inserting something into any element inside the element with class label-hi.

Extra space appears when using :before selector

Add float:left and remove top:0.3em

#top-content .block .views-row::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #f37021;
    content: "\e101";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    left: 0.35em;
    line-height: 1; //uncommented this
    float:left; //added this
    position: relative;
    /*top:0.3em*/ //removed this

}

Demo Here

Any problems with using a pseudo-element to space paragraphs with CSS?

Is this good practice?

No, not really. That's sacrificing valuable pseudo-elements that could be used for generated content or other clever layout tricks (every element can only have one ::before pseudo-element at a time), to do something that can be done conventionally with margins on the elements themselves.

The typical practice for spacing paragraphs is to specify vertical margins on each paragraph and allow margin collapsing to do the rest:

p {
  margin: 20px 0;
}

... because this is what margin collapsing was designed for: so authors can say, "There should be 20px of space between paragraphs", without them having to calculate how much margin each paragraph should have on either end. In other words, this is how CSS implements the concept of paragraph spacing as seen in word processors.

If you don't want this behavior, you need only specify either a top or bottom margin, and change the value of that top or bottom margin wherever it needs to differ. For example:

p {
  margin: 20px 0 0 0; /* Equivalent to margin: 0; margin-top: 20px; */
}

h1 + p {
  margin-top: 10px;
}

Using pseudo-elements for this is unnecessary.

On most places I have read that margins and padding should be used exclusively, but I found that I depend too much on id selectors when using them.

On the same topic, if I were to use them, should I use margin or paddings? On some places I have read that margins are prefered, yet on others that padding should be used for typography.

This is too broad to answer concisely, but I will say that margins and padding can be used together in some situations as they serve different purposes in layout.

That being said, whenever you find yourself wondering if you should use one or the other, as a starting point consider what they were designed for: margins create space outside an element (that can interact with other margins in various ways); padding creates space inside an element to give its children breathing room away from its content edge. Again, there are a number of situations where it's not so simple, but unfortunately it would be too broad to cover in one answer.

It's not clear to me what that hearsay refers to by "typography".

Removing unexpected space in :before :after pseudo elements

Adding line-height: 0; fixed the issue, as below:

.div:after {
    position: absolute;
    content: url(svg/curve-down-bottom.svg);
    width: 100%;
    line-height: 0;
    bottom: -1px;
    left: 0;
    z-index: 999;
}

A you can see here:

As others have commented you could also add display: block;. This has worked with similar issues in the past where images have space below, however with this specific issue line-height:0; provided the desired result.

.div:after {
    position: absolute;
    content: url(svg/curve-down-bottom.svg);
    width: 100%;
    line-height: 0;
    bottom: -1px;
    left: 0;
    z-index: 999;
    display: block;
}

Add space between two words in a ::After Pseudo element CSS

You can use \00a0 instead of spaces in the content property. They don't get collapsed into a single space.

.c1::after{
    content: "SUB TITLE\00a0\00a0THE EXAMPLE";
}

---

Related Topics