/    /  CSS content property

CSS content property

 

CSS content property generates dynamic content. It can be used with the pseudo-elements ::before and ::after. CSS content property is fully supported in all web browsers and used to insert the generated content on a web page.

 

Syntax:

 

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

 

Property Values:

 

  • normal: Set the default value.
  • none : Value does not set the content.
  • counter : The content as a counter.
  • string : Content to the text you specify.
  • open-quote : Content to be an opening quote.
  • close-quote : Content to be a closing quote.
  • no-open-quote: Remove the opening quote from the content.
  • no-close-quote: Remove the closing quote from the content.
  • url(url) : Set the content to some media(image, video, audio, etc.).
  • initial : property to its default value.
  • inherit : property from its parent element.

 

Example :

 

Using normal and none value.

 

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS content Property
  </title>
  <style>        
       body{
       text-align: center;
       }
       p{
       font-size: 25px;
       }
       p::before { 
       content: "Welcome ";
     }

     #para::before { 
       content: normal;
     }
     #para1::before { 
       content: none;
     }
               </style>
</head>

<body>
  <h1> CSS content property </h1>
  <h2> Use of content: normal; and content: none; </h2>
  <p> to the I2tutorials </p>
  <p id = "para"> paragraph using <b>normal</b> value. </p>
  <p id = "para1"> Another paragraph using <b>none</b> value. </p>     
        </body>
</html>

 

OUTPUT:

 

CSS content property

 

Example –

 

Using string and url value

 

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS content Property
  </title>
  <style>        
       body{
       text-align: center;
       }
       p{
       font-size: 25px;
       }
       p::before { 
       content: "Hello World. Welcome ";
     }

     #para::before { 
       content: url("img.png");
     }
     #para1::before { 
       content: url("img.png");
     }
               </style>
</head>

<body>
  <h1> CSS content property </h1>
  <h2> Use of content: string; and content: url(); </h2>
  <p> to the I2Tutorials </p>
  <p id = "para"> paragraph using the <b>url()</b> value. </p>
  <p id = "para1"> Another paragraph using the <b>url()</b> value. </p>            
        </body>
</html>

 

OUTPUT:

 

CSS content property

 

Example –

 

Using open-quote and close-quote value.

 

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS content Property
  </title>
  <style>
       body{
       text-align: center;
       }
       p{
       font-size: 25px;
       }
    p::before {
       content: open-quote;
    }
                   p::after {
       content: close-quote;
    }
  </style>
</head>

<body>
  <h1> CSS content property </h1>
  <h2> Use of content: open-quote; and content: close-quote; </h2>
  <p> Welcome to the I2tutorials </p>
  <p> Another paragraph. </p>
</body>
</html>

 

OUTPUT:

 

CSS content property

 

Example –

 

Using no-open-quote and no-close-quote value.

 

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
 content: open-quote;
}

p::after {
 content: close-quote;
}

p.para::before {
 content: no-open-quote;
}

p.para::after {
 content: no-close-quote;
}
</style>
</head>
<body>
  <h1> CSS content property </h1>
  <h2> Use of content: no-open-quote; and content: no-close-quote; </h2>
<p> Welcome to the I2tutorials </p>
<p class="para"> Another paragraph </p>

</body>
</html>

 

OUTPUT:

 

CSS content property

 

Example –

 

Using attr().

 

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS content Property
  </title>
  <style>
       body{
       text-align: center;
       }
   a::after {
      content: attr(href);
   }
  </style>
</head>

<body>
<h1> CSS Content property </h1>
<h2> Link is displayed by using the <b>attr()</b> </h2>
  <a href= https://www.i2tutorials.com/>Click here!  
  </a>
</body>
</html>

 

OUTPUT:

 

CSS content property