Table of Contents
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:
How to Insert Image Content Using CSS
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:
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:
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>
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.
Syntax:
content: open-quote | close-quote | no-open-quote | no-close-quote
Example:
blockquote {quotes: ‘<<‘ ‘>>’ “(” “)”;}
blockquote:before {content:open-quote;}
blockquote:after {content:close-quote;}
Demo:
The no-open-quote and no-close-quote values do not insert quotation symbols but do increments or decrements the nesting level for quotes.
Comments are closed.