Advanced CSS Pseudo Elements 2022 | Infogen Labs

What Are They?

?In?CSS3, by using the keywords ::before and ::after to a selector you can create pseudo-elements.

• The CSS3 ::before selector inserts content before a selected element and CSS :after inserts content after a specified element.
• The content property is required for a pseudo-element to be created, but as it is not mandatory to provide any value see here, it’s fine to set it to.

?Difference between pseudo-elements and classes

• Pseudo-Elements vs. Pseudo-Classes

1. We can use both of them as per our need where pseudo classes defines the state of the element just like hover, active, visited, focus, focus visible, target, focus within and pseudo elements like before and after inserts elements inside our DOM.
2. There are other pseudo-elements besides ::before and ::after that are used to style parts of existing elements.?Another example is ::selection, which is used to style selected text.?
3. Then there are also pseudo-classes, which are different than pseudo-elements. Pseudo-classes apply styles based on state. For example, we use :checked to apply a style only when a checkbox was checked.
4. Pseudo-elements are prefixed with double colons (::) while pseudo-classes are prefixed with a single colon (:). Older versions of the W3C spec used single colons for pseudo-elements, so you might see :before and :after occasionally. They still work, but it is recommended to use :: instead.

?Usage of pseudo-elements

• Styling <blockquote> like semantic elements

1. The <blockquote> tag specifies a section that is quoted from another source.
2. To style this tag you can specify “open-quote” and “close-quote” in the content property so this will insert open/close quotes appropriate for the current language.

By using pseudo-elements we can make our headings more attractive which will take users attention towards it, all we need is a single <h1> tag in the HTML.

Creating Ribbon Headings

To create ribbon headings like below

we can use CSS pseudo-elements We can achieve this by using some basic HTML, CSS, and offcourse with little bit help of ::before and ::after which will allows us to create these parts of the heading.

Visit Us:?corp.infogen-labs.com?

Social Media:?Instagram?|?Facebook?|?LinkedIn?|?YouTube?|?Twitter?