Adding HTML entities using CSS content

Question

How do you use the CSS content property to add HTML entities?

Using something like this just prints   to the screen instead of the non-breaking space:

.breadcrumbs a:before {
  content: ' ';
}

Lollard

In a different sense, adding content using CSS violates the separation of concerns, CSS is meant for style definitions alone. It is preferable to avoid from a accessibility point of view, as disabling CSS screws up the whole mark up. However, it is nice to add images using this technique. – Potentiate

It depends. In this case it's for presentation purposes. It would "violate" SoC to put " >" in the html – Wolfgram

Just a question, do you think that'd be better off as an ordered list? I mean, it is a list with an order isn't it? – Nullifidian

True, but... there's still order there. Three is after Two is after One. Using an OL would require more markup and a lot more styling, too. – Lollard

@Potentiate - I think it's perfectly acceptably (and good form) to use CSS :after to set, for instance, the asc/desc sort indicator on a sorted column. – Inadmissible

I noticed people have gone crazy about the SoC principle. Heavens, what kind of content is a ">" sign for you?! Have mercy! it's just an icon in this context, a widget, a bullet, you name it. To me content is something I would like to be searchable. – Miscellanea

Helpful link to convert your Icons or characters into the CSS value: evotech.net/articles/testjsentities.html – Oyster

I edited the question and a couple answers to simplify to the question of html entities since that was the actual question here and removed the reference to the strange use case that was making all the answers confusing (adding what looked liked CSS syntax that was just a greater than sign due to its proximity to other unusual CSS escapes) – Coptic

I came to this question because I wanted to add a checkmark to list items marked as completed. – Unamuno

Answer 1

You have to use the escaped unicode :

Like

.breadcrumbs a:before {
  content: '\0000a0';
}

Wolfgram

The leading zeroes are superfluous, see CSS 2.1: 4.3.7 Strings. '>\a0' suffices. – Menado

@dlamblin Further, to avoid characters being interpreted as part of the escape sequence reliably, add standard white-space: '>\a0 bc' is displayed > bc. – Menado

My tool amp-what.com/#q=%3E provides a "CSS" mode. Choose "css" at the bottom of the page. Per CSS reference above, these need to be space delimited when they are ambiguous. – Lecture

@Wolfgram Can you use 'content' to append image instead? Just wondering – Teno

@Adam, no, if you want to append an image, use "background-image" and display:inline-block; and width:123px; height:123px; (use exact width/height) – Illyria

online converter: r12a.github.io/apps/conversion (use CSS escapes result) – Dnepropetrovsk

For anyone about to use two a0's for a wider space, try \2002 for an n-space or \2003 for an m-space. Similar in width to the n-dash and mdash. – Execration

how can we use custom html like this ? for example, I want to use a svg image as content in multiple places, can that be done like this ? – Ingraft

I realise this is very after-the-fact but I found this to be helpful: css-tricks.com/snippets/html/glyphs – Oscan

Answer 2

CSS is not HTML.   is a named character reference in HTML; equivalent to the decimal numeric character reference  . 160 is the decimal code point of the NO-BREAK SPACE character in Unicode (or UCS-2; see the HTML 4.01 Specification). The hexadecimal representation of that code point is U+00A0 (160 = 10 × 16¹ + 0 × 16⁰). You will find that in the Unicode Code Charts and Character Database.

In CSS you need to use a Unicode escape sequence for such characters, which is based on the hexadecimal value of the code point of a character. So you need to write

.breadcrumbs a:before {
  content: '\a0';
}

This works as long as the escape sequence comes last in a string value. If characters follow, there are two ways to avoid misinterpretation:

a) (mentioned by others) Use exactly six hexadecimal digits for the escape sequence:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Add one white-space (e. g., space) character after the escape sequence:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Since f is a hexadecimal digit, \a0f would otherwise mean GURMUKHI LETTER EE here, or ਏ if you have a suitable font.)

The delimiting white-space will be ignored, and this will be displayed  foo, where the displayed space here would be a NO-BREAK SPACE character.

The white-space approach ('\a0 foo') has the following advantages over the six-digit approach ('\0000a0foo'):

• it is easier to type, because leading zeroes are not necessary, and digits do not need to be counted;
• it is easier to read, because there is white-space between escape sequence and following text, and digits do not need to be counted;
• it requires less space, because leading zeroes are not necessary;
• it is upwards-compatible, because Unicode supporting code points beyond U+10FFFF in the future would require a modification of the CSS Specification.

Thus, to display a space after an escaped character, use two spaces in the stylesheet –

.breadcrumbs a:before {
  content: '\a0  foo';
}

– or make it explicit:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

See CSS 2.1, section "4.1.3 Characters and case" for details.

Menado

+1 for the "to display a space after an escaped character" trick, but have to mention that adding an nbsp and then a space kind of defeats the purpose of the nbsp ;) – Basseterre

@Basseterre No, a combination of a non-breaking space character followed by a breaking space character (or vice-versa) will display a gap about the width of two space characters, while two or more verbatim space characters will only display a gap of the width of one space character as the parser of the layout engine collapses consecutive breaking whitespace (including newline) into one space character unless the white-space CSS property declares otherwise. – Menado

yep, I know about collapsing, but the point of nbsp is that it's non-breaking, word chars are also non-breaking by default, so adding a breaking space next to a non-breaking one makes no sense, the end result will be breaking. I'm talking for white-space: normal. – Basseterre

@Basseterre Please read my answer more carefully. It is an example for “display[ing] a space after an escaped character”. The original code had a NO-BREAK SPACE character, so I used the escape sequence for it. You can choose any other escape sequence; if required, you can declare white-space: nowrap, too. – Menado

Answer 3

Update: PointedEars mentions that the correct stand in for   in all css situations would be
'\a0 ' implying that the space is a terminator to the hex string and is absorbed by the escaped sequence. He further pointed out this authoritative description which sounds like a good solution to the problem I described and fixed below.

What you need to do is use the escaped unicode. Despite what you've been told \00a0 is not a perfect stand-in for   within CSS; so try:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Specifically using \0000a0 as  . If you try, as suggested by mathieu and millikin:

content:'No\00a0Break'   /* becomes No਋reak */

It takes the B into the hex escaped characters. The same occurs with 0-9a-fA-F.

Bordello

You just need to put a space after the escape sequence, as specified: '\a0 Break'. '\0000a0Break' is not reliable. – Menado

@Menado Interesting, so then this space is a terminator and does not get included into the string? – Bordello

See CSS 2.1, section "4.1.3 Characters and case". Which also shows that your approach SHOULD be reliable per CSS 2.1. But I find the whitespace approach cleaner (upwards-compatible) and having a smaller footprint. – Menado

Answer 4

In CSS you need to use a Unicode escape sequence in place of HTML Entities. This is based on the hexadecimal value of a character.

I found that the easiest way to convert symbol to their hexadecimal equivalent is, such as from ▾ (▾) to \25BE is to use the Microsoft calculator =)

Yes. Enable programmers mode, turn on the decimal system, enter 9662, then switch to hex and you'll get 25BE. Then just add a backslash \ to the beginning.

Kindling

While totally useful, it doesn't really answer the question so this would be better as a comment to the question. – Bordello

Black right-pointing small arrow (▸ \25B8 ▸ ▸) ftw. Also, see en.wikipedia.org/wiki/Geometric_Shapes for more. – Tympanic

2Joel Purra, read Wiki on more time. you mistook the symbols. – Kindling

@netgoblin: how so? I just happen to like black right-pointing small arrow. – Tympanic

I use this graphemica.com where you can get the Decimal, Hexadecimal and so on – Beaker

Answer 5

Use the hex code for a non-breaking space. Something like this:

.breadcrumbs a:before {
  content: '>\00a0';
}

Teletypesetter

Answer 6

There is a way to paste an nbsp - open CharMap and copy character 160. However, in this case I'd probably space it out with padding, like this:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

You might need to set the breadcrumbs display:inline-block or something, though.

Cristobal

Instead of pasting the nbsp, i'd stick to using an entity, so that it's clear to future maintainers that it's different to a space. – Lollard

on the other hand, you dont do breadcrumbs as they are supposed to be, i.e: the > symbol should be inline with the breadcrumb, and not just a visual style. at least if you want google to see your breadcrumbs and list them under your listing in the search engine. – Orate

Answer 7

For Example :

http://character-code.com/arrows-html-codes.php

Example: If you want select your character , I selected "&#8620" "&#x21ac" (We use HEX values)

.breadcrumbs a:before {
  content: '\0021ac';
}

Result: ↬

Thats it :)

Noriega

i used content:'\10095'; . But the output is not showing. instead of the icon, it's showing rectangle. – Flawy

Answer 8

I know this is an pretty old post, but if spacing is all your after, why not simply:

.breadcrumbs a::before {
  content: '>';
  margin-left: 8px;
  margin-right: 8px;
}

I have used this method before. It wraps perfectly fine to other lines with ">" by its side in my testing.

Miscible

Answer 9

Here are two ways:

• In HTML:

  <div class="ics">&#9969;</div>

This will result into ⛱

• In Css:

  .ics::before {content: "\9969;"}

with HTML code <div class="ics"></div>

This also results in ⛱

Gorget

The correct answer is .ics::before {content: '\9969';} – Oxidize

For the HTML you don't need the div class = ics. You can simply do &#<number>;. Also, watch out for if it is a hex number in which case you want &#x<hex number>; w3schools.com/html/html_symbols.asp – Monosome

Answer 10

Just to make the answers here a little more complete. If you are using something like content: attr(aria-label);, then rather than using unicode escapes, you DO need to use HTML entities instead. For example, using 
 to generate a line break.

Greathouse