What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

Q: What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

In CSS, `:before` and `::before` both target the same pseudo-element that allows content to be inserted before an element's actual content. The difference lies in the CSS specification: CSS3 introduced the double colon `::` notation to clearly distinguish pseudo-elements from pseudo-classes, while `:` single colon syntax is retained for backward compatibility with older browsers. `:before` (single colon) is the legacy syntax from CSS2, still supported for backward compatibility. `::before` (double colon) is the modern CSS3 syntax, recommended for clarity and standards compliance. The double colon distinguishes pseudo-elements from pseudo-classes like `:hover` or `:first-child`. Functionally, both `:before` and `::before` behave the same way in modern browsers. p::before { content: '★ '; color: gold; } This paragraph has a star before its content. In this example, the star is added before the paragraph text using `::before`. Using `:before` would achieve the same visual result, but `::before` is the recommended CSS3 syntax. Prefer using `::before` and `::after` for clarity and compliance with CSS3 standards. Use the `content` property to define what is inserted. Test for backward compatibility if supporting older browsers that recognize only `:before` or `:after`. Use pseudo-elements for decorative or structural styling without altering HTML content.

Difficulty: 3/10

CSS pseudo-elements, selector syntax evolution, browser compatibility

Difference Between :before and ::before in CSS

In CSS, :before and ::before both target the same pseudo-element that allows content to be inserted before an element's actual content. The difference lies in the CSS specification: CSS3 introduced the double colon :: notation to clearly distinguish pseudo-elements from pseudo-classes, while : single colon syntax is retained for backward compatibility with older browsers.

Key Points

1
:before (single colon) is the legacy syntax from CSS2, still supported for backward compatibility.

What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

Difficulty: 3/10

CSS pseudo-elements, selector syntax evolution, browser compatibility

Difference Between :before and ::before in CSS

Key Points

1
:before (single colon) is the legacy syntax from CSS2, still supported for backward compatibility.

What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

Difference Between :before and ::before in CSS

What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?

Difference Between :before and ::before in CSS

Scenario Questions

Follow-up Questions