content property in CSS

css css-content
Mohsen Safari picture Mohsen Safari · Nov 26, 2013 · Viewed 10.9k times · Source

In some template I see that an arrow that created with CSS. something like this:

div:after{
    content:"\f107";
}

this code display an arrow like this :

enter image description here

what is this code? where I can find more codes?

Answer

Mr. Alien picture Mr. Alien · Nov 26, 2013

Using content property embeds a virtual content inside an element, it is used with a pseudo :before or :after, so if you use :before, the content will be embedded before.

From MDN :

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

Content property can hold any character, number, entities. For more information, you can refer an article here.

Also, you can get an handy converter here.

This method is also used by font-awesome - Example and other related svg font embedding libraries, where you can simply call classes to the elements and the fonts will be embedded virtually.

Also, just a side information, content generated using CSS content property is inline by default, also this is rendered inside the element and not outside..

Related questions

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More
Adding HTML entities using CSS content

How do you use the CSS content property to add HTML entities? Using something like this just prints &nbsp; to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&nbsp;'; }

Read More
CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More