In the world of web development, CSS is one of the fundamental languages to give style and design to our pages. One of the most powerful features of CSS is selectors, which allow us to select HTML elements and apply different styles to them. But within selectors, pseudo-elements are an even more interesting and versatile option.
What are pseudo elements in CSS?
In CSS, a pseudo-element is a part of an element that is selected and styled independently of the actual content of the element. Basically, they allow you to manipulate and style specific parts of an element without needing to add additional HTML elements.
Pseudo elements are used by adding a colon (::) after the selector. It is important to mention that starting with CSS3, pseudo-elements should be represented with two double colons (::), instead of a single colon (:).
Most used pseudo-element selectors
Next, we will look at some of the most used pseudo-element selectors in CSS:
::before and ::after
These pseudo-elements allow us to add content before or after the actual content of an element. We can use them to add decorative elements, such as arrows or ornaments, or to add additional content dynamically with the property content. For example:
element::before { content: "Hello!"; } element::after { content: "Goodbye!"; }
::first-letter and ::first-line
These pseudo-elements allow us to select and style the first letter or first line of a text element. For example, we can make the first letter of a paragraph larger or the first line of text underlined:
p::first-letter { font-size: 2em; } p::first-line { text-decoration: underline; }
::selection
This pseudo-element allows us to select and style the text that the user has selected on the page. For example, we can change the background color of the selected text:
::selection { background-color: yellow; color: black; }
Conclusion
CSS pseudo-element selectors allow us to have greater control and customization in the stylization of our web pages. With them, we can manipulate specific parts of an element without needing to add additional elements in the HTML. This gives us great flexibility and helps us achieve more creative designs. Always remember to use the two double colons (::) to represent pseudo elements in CSS3.
Frequently asked questions
What is the difference between ::before and ::after in CSS?
The difference between ::before and ::after in CSS lies in their position with respect to the actual content of the element. ::before adds content before the actual content, while ::after adds content after the actual content. Both pseudo elements are used to add decorative elements or additional content.
How can I underline text with CSS?
To underline text with CSS, you can use the ::first-line pseudo-element together with the text-decoration: underline;. This will cause the first line of text within the element to be underlined.
What is the use of pseudo elements in CSS?
Pseudo-elements in CSS are very useful because they allow us to select and style specific parts of an element without needing to add additional HTML elements. This gives us greater design flexibility and allows us to create custom effects and styles more efficiently.
What is the difference between ::selection and ::before/::after?
The difference between ::selection and ::before/::after in CSS is that ::selection allows us to select and style the text that the user has selected on the page, while ::before/::after allows us to add content before or after the actual content of an element without needing to add additional elements in the HTML.
English 
Spanish