RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/content-string-answer.php below:

Website Navigation

CSS Properties: How to set the content to the text you specified?

CSS Properties: How to set the content to the text you specified?Last update on February 21 2024 12:45:47 (UTC/GMT +8 hours)

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the content to the text you specified</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before {
content: "Learn Tutorial - "; /* Inserts the specified text before 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 -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the content property in CSS to specify custom text content before the content of selected elements.
The CSS rule p:before selects the pseudo-element ::before of all <p> elements.
The content: "Learn Tutorial - "; property inserts the specified text "Learn Tutorial - " before the content of each <p> element.
In this example, each paragraph element is preceded by the text "Learn Tutorial - ".

Live Demo:

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

See the solution in the browser

Supported browser

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4