CSS content Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The content property in CSS is used with the ::before and ::after pseudo-elements to insert generated content into an element.

This property is particularly useful for adding decorative content or for inserting content that is purely presentational, without having to alter the HTML markup.

💡 Syntax

The syntax for the content property is quite flexible and can include text, images, counters, and even combinations of these.

Syntax

Copied

selector::before {
  content: "text" | url(image) | counter(name) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | normal | none;
}

🎛️ Default Value

The default value of the content property is normal, which means no content is generated.

🏠 Property Values

Value	Description
text	A string of text.
url(image)	A URL to an image.
counter(name)	A counter.
attr(attribute)	An attribute value of the element.
open-quote	Inserts an opening quote.
close-quote	Inserts a closing quote.
no-open-quote	Does not insert an opening quote.
no-close-quote	Does not insert a closing quote.
normal	Default value; does not generate content.
none	No content is generated.

📄 Example

In this example, we'll use the content property to add text before a paragraph.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS content Property Example</title>
  <style>
    p::before {
      content: "Note: ";
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
  <h1>Example of CSS content Property</h1>
  <p>This is an important message.</p>
</body>
</html>

🖥️ Browser Compatibility

The content property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older versions of these browsers, making it a reliable choice for adding generated content to your web pages.

🎉 Conclusion

The content property in CSS is a versatile tool for web developers, enabling the insertion of generated content without altering the HTML structure. This can be particularly useful for adding decorative elements, annotations, or other presentational content.

By understanding and utilizing the content property, you can enhance the visual appeal and functionality of your web projects.