Can you apply styles to pseudo elements with the universal selector?

Universal Selector Versus Pseudo Elements

The universal selector () does not directly affect pseudo elements (:before, :after) because they are not actual elements. A simple selector like targets only elements, while pseudo elements are separate entities in the DOM.

To apply styles to pseudo elements, one must include the corresponding pseudo element in the selector. Therefore, :before, :after is necessary to affect these pseudo elements.

Using * { box-sizing: border-box; } alone will not affect pseudo elements because box-sizing is normally not inherited. Instead, pseudo elements will retain their default value of content-box.

In some cases, pseudo elements may appear alongside the universal selector in a selector chain (e.g., *, :before, :after). However, the universal selector can be omitted if it is not the only component in the chain.

Although pseudo elements are displayed inline by default, box-sizing does not affect them when they are inline.

When applying styles to pseudo elements using the single colon notation (:before, :after), it is important to remember that IE8 does not support the double colon notation (::before, ::after).

Finally, even though :before, :after applies styles to all pseudo elements, they will not be generated until the content property is applied.

The above is the detailed content of Can you apply styles to pseudo elements with the universal selector?. For more information, please follow other related articles on the PHP Chinese website!