Can the CSS `content` Property Inject HTML?

CSS content Property: Can it Inject HTML?

The CSS content property, used with :before and :after pseudo-elements, enables the insertion of content before or after an element. However, many developers wonder if it's possible to insert HTML code into the content instead of simple text.

HTML Injection Question

A common question arises:

Can you make the CSS content property insert HTML code instead of text, like this:

.header:before {
  content: '<a href="#top">Back</a>';
}

Answer: No HTML Injection

Unfortunately, as per the CSS specification, this is not feasible. The specification states:

"Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)."

This means that string values used with the content property are treated literally. They are never interpreted as markup, regardless of the document language in use.

Example

Consider the following:

The above is the detailed content of Can the CSS `content` Property Inject HTML?. For more information, please follow other related articles on the PHP Chinese website!