CSS Content Property: Is It Possible to Insert HTML Instead of Text?

Unfortunately, It is not possible to insert an HTML element instead of text as a value of the content property. Because the value is always treated as literal, and these values could not be interpreted as markup. It displays tags as plain text on the browser. This guide demonstrates what is CSS content property and whether it is possible to insert HTML instead of text.

Is it Possible to Insert HTML Instead of Text?

No, it is not possible to insert HTML instead of text in HTML. There are two ways by which the “content” property can be displayed:

Using “:before” Selector
Using “:after” Selector

Use HTML Element as Content Property

Create an HTML file and add some HTML elements in the “<body>” tag. For instance, two HTML elements are created, and they are wrapped in the “<center>” tag to display elements at the center of the page:

<center>
<h1> This is Linuxhint </h1>
<p> The HTML element will display as a plain text </p>
</center>

The output looks like this:

The output shows that the webpage does not contain before or after content.

Using ::before Selector

Select the element selector with which the content property will attach. There are two positions where the content can display its value. Here “::before” selector is used to display the content value before the selected element which is “<p>” in our case.

Now write any HTML element as the value of content inside the double quotes:

p::before {
content: "<h1>hello</h1>";
}

After adding the above code, the output looks like this:

The output displays that HTML code is placed as plain text before the “<p>” tag.

Using ::after Selector

To add the content value “after” the element “::after” selector is used:

p::after {
content: "<h1>Bye</h1>";
}

Now, the content value appears after the “<p>” tag. The final output looks like this:

The output illustrates that the content value is placed as plain text.

Conclusion

It is not possible to use HTML instead of text because the content property does not interpret the tags to markup. It displays the HTML element as plain text. To display the value stored in the content property, the “::before” and “::after” selectors are used. They display the text before and after that HTML element. This guide has successfully demonstrated how to use content property and whether it is possible to insert HTML elements instead of text.