content - HTML CSS CSS Property

HTML CSS examples for CSS Property:content

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. content

Description

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

The following table summarizes the content Property.

Item Value
Default value: normal
Applies to:The ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
normal none for the :before and :after pseudo-elements. This is default value.
noneThe pseudo-element is not generated.
counter content as a counter.
string Inserts the specified string.
url(url)url for an external resource, such as an image.
attr(attribute) inserts the value of specified attribute before or after the selected element(s).
open-quote Insert the opening quotation mark.
close-quote Insert the closing quotation mark.
no-open-quote Do not display the opening quotation mark, but increments (decrements) the level of nesting for quotes.
no-close-quote Do not display the closing quotation mark, but increments (decrements) the level of nesting for quotes.
initial Sets this property to its default value.
inherit take the value of its parent element content property.

The example below shows the content property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS content property</title>
  <style type="text/css">
    p:before {<!--from  w w w.j av a 2 s. co  m-->
        content: "Note: ";
        display: inline;
    }
</style>
 </head>
 <body>
  <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>
 </body>
</html>

Related Tutorials