Skip to content
Related Articles

Related Articles

Improve Article

CSS | content Property

  • Difficulty Level : Basic
  • Last Updated : 08 Aug, 2019

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:






    <!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>                    

    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:




    <!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>                                   

    Output:

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

    Syntax:

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

    Example:




    <!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>                    

    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:




    <!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>                    

    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:




    <!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>                    

    Output:

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

    Syntax:

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

    Example:




    <!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>                                

    Output:

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

    Syntax:

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

    Example:






    <!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>                    

    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:




    <!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>                    

    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:




    <!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>                    

    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
Recommended Articles
Page :