Understanding CSS3 Pseudo-elements

Pseudo-elements and pseudo-classes were introduced before CSS3 but they became well known and supported by many browsers with CSS3 introduction.

Pseudo-classes apply on regular HTML class elements where it works on certain events whereas pseudo-elements effectively manipulate a regular HTML element with its effect.

What is pseudo?

The “pseudo” word is Greek and its meaning is “not genuine,wrong” and as per its meaning pseudo elements are general elements inserted and controlled via CSS but not change anything in the HTML

CSS3 introduced notations for Pseudo-elements and pseudo-classes are “:” and ” :: “, double colon notation.Before css3,single colon notation was compatible for pseudo elements but now it is to specify pseudo classes and so that it might create confusion between the syntax associated with pseudo-elements and that their pseudo-classes.

Types of pseudo entities:

There are two types of pseudo-entities in CSS3:

1. pseudo-classes
2. pseudo-elements

Here is the list of all pseudo-classes and pseudo-elements

Pseudo Classes:

: link – unvisited link (never click on it)
: visited – the visited link (already clicked on the link)
: hover – induced link (have put mouse over the link)
: focus – the focus element (button or input field get the focus when you press Tab)
: active – active element (a link is clicked on the mouse)
: first-child – an element that is the first child of its parent element
: lang () – an element based on the value of its attribute lang

Pseudo Elements:

Pseudo-elements that exist in CSS

:: first-line
:: first-letter
:: before
:: after

Browser support for Pseudo-element

However, whether you use a single colon or double colon syntax for Pseudo-element , the most of the modern browsers will identifies it. Since IE8 only supports single colon syntax, so if you want IE8 compatible, make sure to use a single colon.

Pseudo-element of CSS3 are very popular because it has ability to significantly increase the complexity of CSS elements Without additional markup.

Let’s understand the pseudo elements:

Pseudo-element of CSS3 is used to style specifc HTML element.As we are talking
about CSS,pseudo-element will be used to style the first letter of text or first line of text or to apply style before or after the target element.Although CSS is not a programming language itself but it has extraordinary ability to manage elements by styles.

1. :: first-line

The pseudo-element :: first-line is used to add a special style to the first line of a text and it can be applied only to the elements.

Let’s see an example of pseudo element first-line.

The above example shows how you stylize the first line of a paragraph using pseudo element first line.for styling first line, I have applied color and font-variant here but you can use any CSS attribute.

2. :: first-letter

:: first-letter pseudo-element allows to stylize only the first letter of a text. This pseudo-element can be applied to any CSS property that relate to fonts, colors, backgrounds, spacing of letters and words, text decoration, the vertical alignment, the transformation, line spacing and also used to prevent that next to an element with the float. A similar functionality is performed by :: first-letter pseudo-element.

Here is the example of :: first-letter pseudo-element for paragraph:

The properties involved by :: first-letter as same as :: first-line but the this is usable in a greater number of cases.In Addition, You can also use the two pseudo-elements in combination:

p :: first-letter {
color : #ccc ;
font-size : xx-large ;
}

p :: first-line {
color : #ddd ;
font-variant : small-caps ;
}

Note that at the level of style will not be influenced in any way by the pseudo-elements used on the first letter and the first line. In fact it will retain the default style provided by the CSS rules.

3. :: before

As name suggests, creates a false element and insert content before the target element.

SYNTAX:

If pseudo-elements not set “content” attribute,pseudo-elements is useless. if you remove the content attribute,pseudo-elements will not work.So, At least, content attribute requires with a null reference as its value (ie: content: “”).

4. :: after

The use of :: after pseudo-element is very simple to understand after understanding the :: before.It is mainly used to Insert generated content after target element.

SYNTAX:

:: Before and :: after pseudo-elements by default generated element but not display so if you want to specify their height and width, you need to define them as a block element, for that you can use display: block;

Demo:

Let me explain you with a little example and simple use of quotation mark with :before and :after pseudo element so you can see it in action and to experiment with the code,

Here you learn how to use pseudo-elements Are you implementing pseudo elements in your HTML? Are you facing any issue while implementing pseudo elements? Let me know in comment section. I would like to help you out if you have any issue.