Pseudo Elements Using CSS3

Pseudo Elements Using CSS3

CSS, TUTORIALS

Pseudo Elements Using CSS3




In this Pseudo Elements Using CSS3 a CSS pseudo-element is an attribute used to style specified parts of an element, like a particular word or paragraph in the whole page.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
The syntax for the pseudo-element is shown below,

The ::first-line Pseudo-element – Pseudo Elements Using CSS3
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:

Note:   The ::first-line pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-line pseudo-element:




font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all p elements:

Pseudo Elements Using CSS3
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all <p> elements:

Consider the following example for the ::first-letter of an paragraph

Pseudo Elements Using CSS3
The ::first-letter pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-letter pseudo- element:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
Pseudo-elements and CSS Classes
We can also define the class for our also like the following, Pseudo-elements can be combined with CSS classes:

The following is the sample for the pseudo elements with classes.

Pseudo Elements Using CSS3
The example above will display the first letter of paragraphs with class=”intro”, in red and in a larger size.
Multiple Pseudo-elements – Pseudo Elements Using CSS3
We can also use multiple pseudo-elements for a single component like first-letter, first-line and etc.
n the following example, the first letter of a paragraph will be blue, in an xx-large font size. The rest of the first line will be green, and in small-caps. The rest of the paragraph will be the default font size and color:

Pseudo Elements Using CSS3
The above example will shows how to use the multiple Pseudo Elements Using CSS3.
The ::before Pseudo-element – Pseudo Elements Using CSS3
The ::before pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before the content of each <h1> element:

Consider the following example for the ::before Pseudo elements.

Pseudo Elements Using CSS3

The ::selection Pseudo-element – Pseudo Elements Using CSS3

The ::selection pseudo-element matches the portion of an element that is selected by a user using mouse or the keyboard devices. The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:

Consider the following example for the ::section pseudo elements,

We can also had some other following selection pseudo elements for checking purpose. You can try them on your own exercises.

See the Pen WGbgPO by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

The above all are the various functions we used and performed by the pseudo elements. We hope this lesson will teach you something about the Pseudo Elements Using CSS3.




Leave a Reply