Why Doesn't CSS :after Work with All HTML Elements?

CSS :after Behavior and Element Compatibility

The CSS :after property extends content after an element in its document flow. However, not all elements seem to support this behavior. Why does :after only work with certain elements?

Answer: Replaced Elements vs. Non-Replaced Elements

According to the CSS specification, only non-replaced elements can have :before and :after properties. Replaced elements have their appearance and dimensions determined externally, including elements like images, plugins, and form controls.

What are Replaced Elements?

Replaced elements include:

• Images ()
• Plugins (
• Form elements (, , <input>, <select>)</select>

Why :before and :after Don't Work with Replaced Elements

The CSS specification notes that the interaction of :before and :after with replaced elements is not fully defined. This aspect is reserved for a future specification.

Example

Consider the following example:

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

The DOM structure for this example will be:

<span>
  <before>Before </before>
  Content of span
  <after> After</after>
</span>

This structure does not work for replaced elements like images because they do not have content in the same way as non-replaced elements.

Therefore, the CSS :after property can only be used with non-replaced elements, as their appearance is determined by the content within the element itself.

The above is the detailed content of Why Doesn't CSS :after Work with All HTML Elements?. For more information, please follow other related articles on the PHP Chinese website!