CSS Properties: How to set the content to be some kind of media?

Last update on February 21 2024 12:44:56 (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 some kind of media</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before {
 content: url("https://www.w3resource.com/images/w3resource-logo.png"); /* Sets the content of the pseudo-element ::before of all <p> elements to be an image specified by its URL */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<p>HTML5 Tutorial</p><!-- Inserts a paragraph element with the specified content -->
<p>CSS3 Tutorial</p><!-- Inserts a paragraph element with the specified content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the content property in CSS to set the content of a pseudo-element to be some kind of media, in this case, an image.
The CSS rule p:before targets the pseudo-element ::before of all <p> elements and sets its content to be the image located at the specified URL using content: url("https://www.w3resource.com/images/w3resource-logo.png");.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page