Css: How to Add White Space Before Element's Content

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).

How to add white space before an element's border using CSS

You could use a pseudo-element with position absolute instead of a border for the red line. Then you should also add some padding-left or text-indent to the p element.

p {
  border: 1px solid black;
  position: relative;
  padding-left: 10px;
}

p:before {
  content: '';
  border-left: 3px solid red;
  height: 100%;
  position: absolute;
  left: 5px;
}

<p style="width:350px;height:200px;background-color:grey;">
  Start editing to see some magic happen :)
</p>

add more white space in content pseudo class

What about using some padding-right instead of spaces?

h3 {
    padding-right: 10px
}

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>

Whitespace appearing using CSS :after and :content

The white space is appearing because it is there in your HTML code.

The closing </li> tag is on a new line. Carriage returns are counted as white space in HTML, and therefore you have white space at the end of the list item element.

The reason it is showing up is because you're using display:inline. When usign inline (or inline-block), white space is relevant because inline means "treat this element as plain text", and therefore any white space is considered an intentional part of the text.

The best way to get rid of this is to simply put the </li> closing tag on the same line as the rest of the text, so that there is no white space there.

There are a number of other ways around it, but most of them involve quite hacky CSS; simply closing up the space is by far the easiest option.

The next best alternative is to switch to using float:left instead of display:inline. This will also deal with the problem, but will change the way the whole thing is rendered, which will require you to make various other changes to your CSS to compensate.

Add a space in CSS content

For CSS content   use \a0. The following is a list of different types of spaces and their CSS code:

• space: \20
• nbsp: \a0
• en space: \2002
• em space: \2003
• 3 per em space: \2004
• 4 per em space: \2005
• 6 per em space: \2006
• figure space: \2007
• punctuation space: \2008
• thin space: \2009
• hair space: \200a
• zero width space: \200b
• narrow nbsp: \202f
• medium mathematical space: \205f
• zero width nbsp: \feff

Demo

a {
  display: block;
}

a::before {
  font-family: FontAwesome;
  display: inline-block;
}

#x0::before {
  content: "\f095";
}

#x1::before {
  content: "\f095\20"
}

#x2::before {
  content: "\f095\a0"
}

#x3::before {
  content: "\f095\2002"
}

#x4::before {
  content: "\f095\2003"
}

#x5::before {
  content: "\f095\2004"
}

#x6::before {
  content: "\f095\2005"
}

#x7::before {
  content: "\f095\2006"
}

#x8::before {
  content: "\f095\2007"
}

#x9::before {
  content: "\f095\2008"
}

#xa::before {
  content: "\f095\2009"
}

#xb::before {
  content: "\f095\200a"
}

#xc::before {
  content: "\f095\200b"
}

#xd::before {
  content: "\f095\202f"
}

#xe::before {
  content: "\f095\205f"
}

#xf::before {
  content: "\f095\feff"
}

#x0::after {
  content: "\a0\a0"
}

#x1::after {
  content: "\a0\a0\\20"
}

#x2::after {
  content: "\a0\a0\\a0"
}

#x3::after {
  content: "\a0\a0\\2002"
}

#x4::after {
  content: "\a0\a0\\2003"
}

#x5::after {
  content: "\a0\a0\\2004"
}

#x6::after {
  content: "\a0\a0\\2005"
}

#x7::after {
  content: "\a0\a0\\2006"
}

#x8::after {
  content: "\a0\a0\\2007"
}

#x9::after {
  content: "\a0\a0\\2008"
}

#xa::after {
  content: "\a0\a0\\2009"
}

#xb::after {
  content: "\a0\a0\\200a"
}

#xc::after {
  content: "\a0\a0\\200b"
}

#xd::after {
  content: "\a0\a0\\202f"
}

#xe::after {
  content: "\a0\a0\\205f"
}

#xf::after {
  content: "\a0\a0\\feff"
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href='#/' id='x0'>CALL</a>
<a href='#/' id='x1'>CALL</a>
<a href='#/' id='x2'>CALL</a>
<a href='#/' id='x3'>CALL</a>
<a href='#/' id='x4'>CALL</a>
<a href='#/' id='x5'>CALL</a>
<a href='#/' id='x6'>CALL</a>
<a href='#/' id='x7'>CALL</a>
<a href='#/' id='x8'>CALL</a>
<a href='#/' id='x9'>CALL</a>
<a href='#/' id='xa'>CALL</a>
<a href='#/' id='xb'>CALL</a>
<a href='#/' id='xc'>CALL</a>
<a href='#/' id='xd'>CALL</a>
<a href='#/' id='xe'>CALL</a>
<a href='#/' id='xf'>CALL</a>

use :before and :after elements to fill remaining space of text element

you can use display:flex; without span tag but, pseudo class, since this is only about design.

h2 {
  display: flex;
}
h2:before,
h2:after {
  content: '';
  flex: 1;
  margin: auto 1em;
  height: 0;
  border-top: solid red 1px;
}

<h2>Small title</h2>
<h2>This is a very long title</h2>

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

p {
  margin: 20px 0;
}

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

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