content property in CSS

馋奶兔 提交于 2019-12-05 08:07:42
Mr. Alien

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

As other answers have explained, the CSS rule uses the content property to insert a character by its Unicode number.

However, the character used is U+F107 PRIVATE USE CHARACTER-F107. This means that it has no meaning except by private agreements and should not be used in public information interchange. Unfortunately, some “awesome” tricks use Private Use code points to insert graphic symbols. This means that unless a very specific font, with some symbols assigned to those code points is used, a generic symbol of an unknown character appears.

So it is much safer to use an image instead, in the content proper.

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.

Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.

You can find a list of FontAwesome here : A list of Font Awesome icons and their CSS content values

You can also go through this link, FontAwesome Examples, where you can see different icons and how to apply different size on it.

CSS Content Property : The content property is used with the :before and :after pseudo-elements, to insert generated content.

Read more

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!