How To Generate Custom Content Using CSS

Content property in CSS can generate custom content in a HTML document with the :before and :after pseudo-elements. With this property, you can add any string, image url, any attribute values, open quote and close quote before and after any element. You can also style a list by adding custom counter with adding additional content on a list. CSS rules can also be used to style the generated content. Here are syntax and examples for generating custom content in a HTML document with the:before and :after pseudo-elements.

Syntax:

content: normal | none | string | url() | counter | attr(x) | open-quote | close-quote | no-open-quote | no-close-quote | inherit

Example:

div.add:before{content:”It is Generated Content”;}

How to Insert String Content Using CSS

You can insert string content with most commonly used string value, which simply inserts the defined quote-delimited string either before or after the selected element depending on the rule in use. Here are syntax and examples for inserting string content in a HTML document with the:before and :after pseudo-elements.

Syntax: content:string

Example:

div.block:before{content:”Div Start”;}
div.block:after{content:”Div End”;}

You can style generated content using CSS rules as follows.

Example:

div.block:before{content:”Div Start”; font-size:x-large; background-color:brown;color:white;}
div.block:after{content:”Div End”;font-size:xx-large; background-color:pink;color:blue;}

Demo:

See the Pen QbeWMR by Shuseel Baral (@shuseel) on CodePen.

How to Insert Image Content Using CSS

You can insert image content using image url on content value before and after any HTML element.

Syntax: content:url()

Example: p.generate:before {content:url(image1.gif)

You can also insert both string content and image content as given below.

Example:

div.both:before {content:”Attention!” url(attention.gif) “Generated content Here”; font-size:xx-large, background-color:pink; color:green;}

Demo:

See the Pen bdXGzP by Shuseel Baral (@shuseel) on CodePen.

How to Style List Adding Custom Counter

While adding list items on HTML document, counter values can be specified and used to automatically add a sequential indicator. It is generally defined in the form of counter(name), where name is the name of the counter, or counter(name, style), where style indicates the list-style-type to use.

Syntax: content:counter

Example:

ol.countertest li:before {content: “-“;}
ol.add{counter-reset: counter1;list-style-type: none;}
ol.add li:before {counter-increment:counter1; content:counters(counter1, “.”)”:”;}

Demo:

See the Pen pJMoXg by Shuseel Baral (@shuseel) on CodePen.

How to Insert HTML Attribute Value Using CSS

You can insert HTML attribute before and after any HTML element using attr(x)syntax which return a string value for the attribute x for the element the rule is associated with.

Syntax: content: attr(X)

Example:

h3:before {content:attr(title);font-size:large; background-color:pink;color:green;}
<h3 title=”This is title of the post”>It is a Title</h3>

Demo:

See the Pen PqMwYg by Shuseel Baral (@shuseel) on CodePen.

How to Insert Open and Close Quote Using CSS

You can also insert custom open and close quote for blockquote using the property content. The values of open quote and close quote insert quotation symbols specified by the quotes property, or if undefined default to the user agent’s default quote style.