CSS - Content (Property)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

Advertising

3 - Rendering

4 - Property

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

5 - Example

5.1 - Pseudo-element

p::before{
   content: "What ever ... ";
   display: inline;
   border:1px solid aqua;
}

where:

<p>This text will have "What ever" at its beginning</p>

We can see with the aqua border that an element (a pseudo-element) is added at the beginning.

Advertising

5.2 - With the attr function

With the attr function, you can show data attribute in the content.

<p data-length="2m" >Beyond The Sea</p>
p::before {
   content: attr(data-length) " ";
}

6 - Documentation / Reference

web/css/content.txt ยท Last modified: 2019/02/09 11:43 by gerardnico