open-quote

The content: open-quote; CSS property value inserts the appropriate opening quotation mark for the current language into the content of ::before and ::after pseudo-elements.

Syntax:

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

Example: This example demonstrates the use of the content property where the property value of content is set to open-quote.

HTML
<!DOCTYPE html>
<html>

<head>
    <title> CSS content Property </title>
    <style>
        p::before {
            content: open-quote;
        }
    </style>
</head>

<body>
    <p>Welcome to w3wiki!</p>
</body>

</html>

Output:

"Welcome to w3wiki!

CSS content Property

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. It allows insertion of text, images, or HTML elements, enhancing design without altering the original HTML structure, thereby providing flexibility in styling and layout.

Syntax:

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

Property Values: All the properties are described well with the example below.

Table of Content

  • normal
  • none
  • initial
  • attribute
  • String
  • open-quote
  • close-quote
  • no-open-quote:
  • no-close-quote
  • inherit

Similar Reads

normal

The content: normal; CSS property value ensures that no additional content is generated for the ::before and ::after pseudo-elements, maintaining default behavior without inserts....

none

The content: none; CSS property value specifies that no content is generated for the ::before and ::after pseudo-elements, effectively removing any inserted content....

initial

The content: initial; CSS property value sets the content of the ::before and ::after pseudo-elements to its initial default value as specified by the browser....

attribute

The content: attr(attribute-name); CSS property value inserts the value of the specified HTML attribute into the content of the ::before and ::after pseudo-elements....

String

The content: “string”; CSS property value inserts the specified string literal into the content of the ::before and ::after pseudo-elements....

open-quote

The content: open-quote; CSS property value inserts the appropriate opening quotation mark for the current language into the content of ::before and ::after pseudo-elements....

close-quote

The content: close-quote; CSS property value inserts the appropriate closing quotation mark for the current language into the content of ::before and ::after pseudo-elements....

no-open-quote:

The content: no-open-quote; CSS property value prevents the insertion of an opening quotation mark before content specified using `open-quote` within ::before and ::after pseudo-elements....

no-close-quote

The content: no-close-quote; CSS property value prevents the insertion of a closing quotation mark after content specified using close-quote within ::before and ::after pseudo-elements....

inherit

The content: inherit; CSS property value inherits the content behavior from its parent element, allowing ::before and ::after pseudo-elements to follow the parent’s content rules....