You are currently viewing  What is content property in CSS | Beginners Guide
  • Post category:CSS

 What is content property in CSS | Beginners Guide

 What is CSS content property

In this article, I would like to discuss what is CSS content property and how to use it.

What is the content property?

Values : “string” | open-quote | close-quote | url(“filepath”) | none

CSS content property is used to generate content dynamically at runtime. It is also used to generate content before or after the content of HTML elements. To the CSS content property, we can assign various values, we can assign string which means a sequence of characters enclosed in double quotations. We can also assign predefined values like an open quote, closed quote etc. We can also assign the URL of a resource it may be an image etc. Let’s see some practical examples

How to use the content property

Adding quotes

<html>
<head>
<style type="text/css">
.quote::before{
content: open-quote;
}
.quote::after{
content: close-quote;
}
</style>
</head>
<body>
<p> Hello <span class="quote">HTML</span> </p>
</body>
</html>
//output
Hello "HTML"
  1. In the above code, first, we have written basic HTML structure code and the title is set to CSS content property.
    Within the head section, we have opening and closing style tags.
  2. In the body section, we have a <p> tag We have the word “hello HTML” inside the <p> tag and we put only the word “HTML” inside the span tag with classname “quote” for style to display double quotes.
  3. To generate an open quote, we should use CSS content property and give value as “open-quote” in “quote::before”. We are telling to the browser generate the open quote after the class quote.
  4. To generate a close quote, we should use content property and give value close-quote” in “quote::after” as in the above code. We are telling to the browser generate the close-quote before the class “quote”.
  5. See the above-given output, the word HTML is displayed with opening and closing quotes.
READ ALSO  CSS padding property - Complete Guide

Adding string

.string::before{
content: "Welcome ";
}
.string::after{
content: " HTML ";
}
<span class="string">To</span>
//output
// Welcome To HTML
  1. In the above HTML code, we have only the word “to” within the span tag with the classname “string”.
  2. To add a sting before the span tag, we can select “.string::before” and use the content property to give value as your string.
  3. To add a sting after the span tag, we can select “.string::after” and use the content property to give value as your string as in the above code.

Leave a Reply