CSS Properties: How to content property is used with the after?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to content property is used with the after</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:after { 
 content: "w3r"; /* Adds content after every <p> element */
 }
</style><!-- Ends the CSS style block -->
</head>
<body>
<p><a href="http://www.example.com">example.com</a></p><!-- Inserts a paragraph element with a link to example.com -->
</body>
</html>

Explanation:

This HTML document demonstrates the use of the content property in CSS with the ::after pseudo-element selector.
The CSS rule p:after selects every <p> element and inserts content after it.
The content: "w3r"; property inserts the text "w3r" after each <p> element.
In this specific example, the "w3r" text will be inserted after the <p> element containing the link to "example.com".

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page