Adding a Space Within the Before and After CSS Content

I wished to customise a quotation area on a website. Also to be added was a pair of quotation marks with a little space between them

Adding a boxed background was easy. As was the general rendering of the content type.

As this was to be automated I thought I would use the CSS before and after pseudo classes to implement the quotation marks.

Adding additional characters or content either side of an existing block with the CSS before and after pseudo classes can be effected.

For example a line can be added after the header or quote marks added around some content.

In the typical layout shown below quote marks are added around the quotation.

.quotes::before{
  content:"\f10d";
  font-size:24px;
  color:#000080;
}
.quotes::after{
  content:"\f10e";
  font-size:24px;
  color:#000080;
}

I had a requirement to put the two quote marks, together with a little space between them. Their position was to be before the quotation.

Here’s the revised CSS entry

.quotes::before{
  content:"\f10d  \f10e";
  font-size:24px;
  color:#000080;
}

But the included space is non emphasised losing its full width. I wanted to force a space

The characters used are represented in Unicode.

The usual a non-blanking space is \00a0

This is used because too many spaces side-by-side are reduced to just the one.

.quotes::before{
  content:"\f10d\00a0\00a0\00a0\f10e";
  font-size:24px;
  color:#000080;
}

Here I’ve used the non-blanking space code. There is another for a normal space

Space: \0020
Non-blanking space: \00a0

I read that FontAwesome doesn’t handle the code \00a0 properly.

However, with version 4 of FontAwesome I found that the multiple characters of \00a0 worked for me.

But, there is a further complication in that FontAwesome won’t represent \00a0 as a space. The code in this case to be used is \0020.