Add whitepaces with ::before selector

Question

I have tried this but it didn't work:

.stackoverflow::before {
    font-family: 'FontAwesome';
    content: "\f16c ";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a>

Can we add whitespace(s) with ::before selector and content property like that?

That's weird... If I add 1 more space, or replace the icon itself with another character, it works... — Alexander O'Mara, Jun 05 '16 at 05:00
^ This seemingly strange behavior is addressed over there. The first space after an escape sequence is the delimiter to define it has ended. — Alexander O'Mara, Jun 05 '16 at 05:14
@AlexanderO'Mara Thank you for the reference. That's what I really want to learn about :) — wpclevel, Jun 05 '16 at 05:18

Arun AK · Accepted Answer · 2016-06-05T05:04:12.680

3

Yes, You can add whitespace like this content: "\f16c \00a0";

Jsfiddle

\00a0 is hex code for a non-breaking space,used in content property. More Info

Hope it helps :)

edited Jun 05 '16 at 05:04

answered Jun 05 '16 at 05:00

Arun AK

4,353
2
23
46

Can you explain the significance of this code? – Alexander O'Mara Jun 05 '16 at 05:01
@AlexanderO'Mara Edited the answer man :) – Arun AK Jun 05 '16 at 05:05
1

Better. You wouldn't happen to know why 2 regular spaces and `"A "` with just 1 space works, but `"\f16c ";` doesn't would you? I'm finding this rather bizarre. – Alexander O'Mara Jun 05 '16 at 05:07
Thank you! It works like a charm :) – wpclevel Jun 05 '16 at 05:07
As i mentioned in the answer, \00a0 is the hex code for non-breaking space used in the content property. We cant directy use in content property. So for that reason we are using the hex code. More Info in http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ – Arun AK Jun 05 '16 at 05:08
Ah, I've located the root cause for this seeming strange behavior. http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – Alexander O'Mara Jun 05 '16 at 05:14

zer00ne · Answer 2 · 2016-06-05T05:05:14.213

1

Yep, use \a0 it's   or non-breaking space.

.stackoverflow::before {
    font-family: 'FontAwesome';
    content: "\f16c\a0\a0\a0\a0\a0\a0";
}

<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a>
</html>

edited Jun 05 '16 at 05:05

answered Jun 05 '16 at 05:01

zer00ne

41,936
6
41
68

I think the intention is to add spacing after the icon. – Alexander O'Mara Jun 05 '16 at 05:04

Add whitepaces with ::before selector

2 Answers2