CSS Pseudo-Element
Introduction-
In this blog on CSS Pseudo-Element, we will discuss CSS Pseudo-Elements and various ways to use them in CSS.
CSS pseudo-element is a keyword added to a selector that helps us style some part of the selected elements.
For instance, CSS Pseudo-Element is used for -
- Style the first letter or line of an element
- Insert content before or after, the content of an element
We don’t need to use Javascript or any other script to use these effects.
Below is the syntax of CSS Pseudo-Element -
|
selector::pseudo-element { property: value; } |
In the syntax of CSS Pseudo-Element, we use double colon notation (::). In CSS3, the double colon is replaced by the single colon notation for CSS pseudo-elements.
Now, Let’s discuss the widely used CSS Pseudo-Elements.
::first-letter CSS Pseudo-Element -
‘::first-letter’ CSS Pseudo-element applies styles to the first letter of the first line of a block-level element, but it applies style only when it is not preceded by other content such as images or inline tables. Only a few properties are supported when we are using this element, and these properties are listed below -
- Padding properties i.e. padding-top, padding-right, padding-bottom, and padding-left).
- Margin properties i.e. margin-top, margin-right, margin-bottom, and margin-left .
- Border properties i.e. border-top, border-right, border-bottom, border-left, border-color, border-width.
- Background properties i.e. background-color, background-repeat, background-image, and background-position.
- Color properties.
- Font properties i.e. font-style, font-family, font-size, font-color.
- Text-related properties (such as text-shadow, text-transform, text-decoration, etc.).
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>first-letter Example</title> <style> body{ background-color:whitesmoke; color:blue; font-size: large; text-align: center; } p::first-letter{ color:red; font-size: 30px; font-weight: bold; } </style> </head> <body> <h1>Coding Ninjas</h1> <h2>::first-letter element</h2>
<p>This is a text using first-letter pseudo-element to style first letter of the paragraph.first-letter element changed the first letter of this text to yellow and later made it bold.</p>
</body> </html>
|
OUTPUT
::first-line CSS Pseudo-Element -
‘::first-line’ CSS Pseudo-element applies styles to the first line of a block-level element. An important thing to note here is that the length of the first line depends on many criteria like the width of the document, width of elements, font size of the text.
Similar to ‘::first-letter’, there are few properties supported by it,,CSS Pseudo-Elements arend below are these listed properties -
- Background properties i.e. background-image, background-repeat, background-color,background-position.
- Font properties i.e. font-size, font-family, font-style, font-color.
- Color properties.
- Other properties like line-height, word-spacing, vertical-align, text-decoration, letter-spacing, text-transform.
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>first-line Demo</title> <style> body{ background-color:whitesmoke; color:blue; font-size: large; text-align: center; }
p::first-line{ color:Red; font-weight: bold; } </style> </head>
<body>
<h1>Coding Ninjas</h1> <h2>::first-line element</h2>
<p>This is a text using first-line pseudo-element to style first line of the text.first-line pseudo-element turned first line to red and made it bold.</p>
</body> </html>
|
OUTPUT
::before CSS Pseudo-Element -
‘::before’ CSS Pseudo-element is used to add some content before the content of the selected element. It is sometimes used to add cosmetic content to an element with the content property. It is inline by default.
We do have the flexibility to add strings or images before the content using this ‘::before’ pseudo-element.
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>before Demo</title> <style> body{ background-color:whitesmoke; color:blue; font-size: large; text-align: center; } p::before{ content: '"'; color: red; font-size: 30px; } </style> </head> <body> <h1>Coding Ninjas</h1> <h2>::before element</h2>
<p>This is a text in which we have added red color quotation marks using ::before element.</p>
</body> </html>
|
OUTPUT
::after CSS Pseudo-Element -
‘::after’ CSS Pseudo-element is similar to ‘::before’ Pseudo Element but it creates a pseudo-element that is the last child of the selected element. It is sometimes used to add cosmetic content to an element with the content property. It is inline by default.
We do have the flexibility to add strings or images before the content using this ‘::before’ pseudo-element.
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>after Demo</title> <style> body{ background-color:whitesmoke; color:blue; font-size: large; text-align: center; } p::after{ content: '"'; color: red; font-size: 30px; } </style> </head> <body> <h1>Coding Ninjas</h1> <h2>::after element</h2>
<p>This is a text to which we added red color quotation marks using ::after element.</p>
</body> </html>
|
OUTPUT
::marker CSS Pseudo-Element -
‘::marker’ CSS Pseudo-element is used to select the marker box of a list item that contains a number or a bullet. It works on a pseudo-element set or any element to display list items such as the <summary> and <li> elements.
CSS properties that can be used with this element are listed below -
- White-Space Property.
- Color properties.
- The content property
- All font properties
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>marker Demo</title> <style> body{ background-color: whitesmoke; color: blue; text-align: center; } ul{ width: 40px; } ul li::marker{ color: red; font-size: 30px; } </style> </head> <body> <h1>Coding Ninjas</h1> <h2>::marker element</h2> <ul> <li>CSS</li> <li>Java</li> <li>C++</li> </ul> </body> </html>
|
OUTPUT
::selection CSS Pseudo-Element -
‘::selection’ CSS Pseudo-element can be used to apply the style to the part of a document that has been selected by the user either by dragging the mouse or clicking across the text.
CSS properties that can be used with this element are listed below -
- Color properties.
- Properties like cursor, outline.
- Text decoration and its associated properties.
HTML Solution -
|
<!DOCTYPE html> <html lang="en"> <head> <title>selection Example</title> <style> body{ background-color: whitesmoke; color: blue; text-align: center; } p::selection{ color: red; background-color: green; font-size: 30px; } ::selection{ color: green; background-color: red; font-size: 30px; } </style> </head> <body> <h1>Coding Ninjas</h1> <h2>::selection element</h2>
<p>Content in this text turns red with green background on selection.</p> <span>As this is not a paragraph, you can notice red background and green text on selection.</span> </body> </html>
|
OUTPUT
Frequently asked questions-
1) What is CSS Pseudo-Element?
CSS pseudo-element is a keyword added to a selector that helps us style some part of the selected elements.
We don’t need to use Javascript or any other script to use these effects.
2) What is the syntax of CSS Pseudo-Element?
Below is the syntax of CSS Pseudo-Element -
|
selector::pseudo-element { property: value; } |
3) Why are we using a double colon instead of the single colon in syntax?
W3C has attempted to differentiate between pseudo-elements and pseudo-classes. That’s why double colon is being used in the syntax. In CSS3, the double colon is replaced by the single colon notation for pseudo-elements. So the recommendation is to use double colon notation (::pseudo-element) instead of using single colon notation (:).
Key takeaways-
In this article on CSS Pseudo-Element, we discussed What are CSS Pseudo-Elements and then discussed the popularly used pseudo-elements. Also, we find out the properties of CSS which can be used along with these elements. For more learning on CSS and the front end part, refer to Codingninjas.
If you think that this blog helped you, then share it with your friends!.
Until then, All the best for your future endeavors, and Keep Coding.
By: Harsh Goyal
