CSS | content Property

The content property in CSS is used to generate the content dynamically (during run time). It is used to generate content ::before & ::after pseudo element.

Syntax:

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

Property Values:



  • normal: It sets the default value. It set the content if content property is normal.

    Syntax:

    Element::before|after { 
        content: normal;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before { 
                content: "Welcome ";
            }
              
            a::before { 
                content: normal;
            }
        </style>
    </head>
      
    <body>
        <p>to GeeksforGeeks</p>
        <p id = "a">you</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Welcome to GeeksforGeeks
    Welcome you
  • none: It does not set the content before and after the pseudo element.

    Syntax:

    Element::before|after { 
        content: none;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before { 
                content: "Hello";
            }
              
            p#a::before { 
                content: none;
            }
        </style>
    </head>
      
    <body>
        <p> GeeksforGeeks!</p>
        <p id = "a">Welcomes to GeeksforGeeks!</p>
    </body>
    </html>                                   

    chevron_right

    
    

    Output:

    Hello GeeksforGeeks!
    Welcome to GeeksforGeeks!
  • initial: It sets the property to its default value.

    Syntax:

    Element::before|after {
        content: initial;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before { 
                content: "Welcome ";
            }
              
            a::before { 
                content: initial;
            }
        </style>
    </head>
      
    <body>
        <p>to GeeksforGeeks</p>
        <p id = "a">you</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Hello GeeksforGeeks!
    Hello Welcomes to GeeksforGeeks!
  • attribute: It sets the attribute value containing a specified value.

    Syntax:


    Element::before|after { 
        content:attr(href); 
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            a::after {
                content: attr(href);
            }
        </style>
    </head>
      
    <body>
        <a href=
            Click Here!
        </a>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Click Here! https://www.geeksforgeeks.org/html-style-attribute/
  • String: It is used to generate any string before and after the HTML element.

    Syntax:

    Element::before|after { 
        content: string;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
          
            /* string value used here */
            p::before { 
                content: "Hello";
            }
        </style>
    </head>
      
    <body>
        <p> GeeksforGeeks!</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Hello GeeksforGeeks!
  • open-quote: It generate opening quote before and after an element.

    Syntax:

    Element::before|after { 
        content: open-quote;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before {
                content: open-quote;
            }
        </style>
    </head>
      
    <body>
        <p>Welcome to GeeksforGeeks!</p>
    </body>
    </html>                                

    chevron_right

    
    

    Output:

    "Welcome to GeeksforGeeks!
  • close-quote: It generate a closing quote before and after an element.

    Syntax:

    Element::before|after { 
        content: close-quote;
    }

    Example:


    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::after {
                content: close-quote;
            }
            p::before {
                content: open-quote;
            }
        </style>
    </head>
      
    <body>
        <p>Welcome to GeeksforGeeks!</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    "Welcome to GeeksforGeeks!"
  • no-open-quote: It removes opening quote from the content if it is specified.

    Syntax:

    Element::before|after { 
        content: no-open-quote;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before {
                content: open-quote;
            }
            p::before {
                content: no-open-quote;
            }
        </style>
    </head>
      
    <body>
        <p>Welcome to GeeksforGeeks!</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Welcome to GeeksforGeeks!
  • no-close-quote: It removes closing quote from the content if it is specified.

    Syntax:

    Element::before|after { 
        content: no-close-quote;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            CSS | content Property
        </title>
        <style>
            p::before {
                content: open-quote;
            }
            p::after {
                content: no-close-quote;
            }
        </style>
    </head>
    <body>
        <p>Welcome to GeeksforGeeks!</p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    "Welcome to GeeksforGeeks!
  • inherit: This property is inherited from its parent element.

    Syntax:

    Element::before|after { 
        content: inherit;
    }

Supported Browsers: The browser supported by content property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.