CSS Properties: How to set the content to be an opening quote?

Last update on February 21 2024 12:44:58 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the content to be an opening quote</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before {
 content: open-quote; /* Inserts an opening quote before the content of all <p> elements */
}
p:after {
 content: close-quote; /* Inserts a closing quote after the content of all <p> elements */
}

</style><!-- Ends the CSS style block -->
</head>
<body>
<p>w3resource - HTML5</p><!-- Inserts a paragraph element with the specified content -->
<p>w3resource - CSS3</p><!-- Inserts another paragraph element with the specified content -->
<p><strong>Note:</strong> You cannot have "close-quote" without "open-quote".</p><!-- Inserts a paragraph element with a note -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the content property in CSS to insert opening and closing quotes before and after the content of selected elements.
The CSS rule p:before selects the pseudo-element ::before of all <p> elements and inserts an opening quote using content: open-quote;.
The CSS rule p:after selects the pseudo-element ::after of all <p> elements and inserts a closing quote using content: close-quote;.
In this example, opening and closing quotes are added before and after the content of each <p> element, respectively.

Live Demo:

See the Pen content-open-quote-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page