Applying ::before and ::after Pseudo-Elements to Which Self-Closing Elements

CSS treats both and as replaced elements, despite the fact that has a start tag, end tag, and content. It remains unclear whether must or should be considered a replaced element, as this is not indicated in section 14.5 of WHATWG HTML. However, most browsers default to rendering as a replaced element and this behavior is typically unalterable.


Solution:

According to the CSS 2.1 spec,

The complete definition of how :before and :after interact with replaced elements, like HTML’s IMG, is not provided in this specification. However, a detailed explanation of this interaction will be included in a forthcoming specification.

However, the existing version of Selectors Level 3 solely mentions.

The ::before and ::after pseudo-elements, which are explained in CSS 2.1, allow for the description of content that is generated before or after the content of an element.

The definition of replaced elements in CSS 2.1 is as follows:

An image, embedded document, or applet are examples of an element that falls beyond the CSS formatting model’s range of content.

The CSS rendering model does not take into account the content of elements that have been replaced.

According to MDN,

The elements that are usually replaced include

<img>

,

<object>

, and

<video>

, as well as certain forms of elements such as

<textarea>

and

<input>

. However, there are also some elements, such as

<audio>

and

<canvas>

, that are only replaced in specific situations.

The utilization of either

:before

or

:after

along with modified components may generate undependable outcomes.

Frequently Asked Questions

Posted in Css