Pseudo elements

Pseudo elements

As everybody know, CSS is used for styling HTML elements, for making HTML pages colorful and best aligned. But can we add HTML elements with CSS? Yes, Pseudo elements in CSS helps us to add elements, when the html dom is rendered. Let us explore what is pseudo elements? how it is used? what are the benefits of using them? what are the must know for using them?

What is Pseudo elements?

They are elements which are not actually existing. In other words, it allow logical elements to be defined which are not actually existing in the document element tree.

Why Pseudo elements are used?

They are used to add sub-parts of elements. They help us to set style on a part of an element’s content beyond what is specified in the documents. In other words, pseudo-elements can be used to insert extra element before and after of the content’s element.

Pseudo elements can be used for common typographic effects such as initial caps and drop caps. They can also address generated content that is not in the source document (with “:before” and “:after”). Pseudo elements are only be applied to external and document-level contexts – not to in-line styles. As already mentioned, pseudo elements are not added in the dom tree, so, we cannot do the inline styling for the pseudo element.

What are the pseudo elements?

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

How the pseudo elements styles will be rendered?

They are restricted in where they can appear in a rule. They may only appear at the end of a selector chain, that is ,after the subject of the selector. They should come after any class or ID names found in the selector. Though they are fake elements, they actually act like a real element. We are able to add any styles declaration upon them, in which ever way we want. For eg. we can change background color, font size, text color, aligning text text of the pseudo element etc.

How to add ‘before’ and ‘after’ Pseudo elements?

The ‘before’ and ‘after’ are used in conjunction with the content property to place content either side of a box without touching the HTML.

p::before {
   content : "text";
}

Can we add dimensions for pseudo elements?

yes, we can. By default, pseudo elements are inline elements. So, we have to make them to display:block. Then we can add width, height etc..

Examples for pseudo-elements

The following code examples will show how to use pseudo elements in our web pages

::first-letter

p::first-letter {
  font-size : 20px;
}

::first-line

p::first-line {
   font-weight : bold;
}

::before

p::before {
   content : "special text";
   background-color : #ccffcc;
   font-weight : bold;
}

::after

p::after {
content : "image";
}

::selection

p::selection {
    color: white;
    background-color: blueviolet;
}

::selection pseudo element to work in Firefox, we have to add browser specific style.

p::-moz-selection {
    color: white;
    background-color: blueviolet;
}

Single colon or Double colon

Which is the correct usage of colon for pseudo elements? Single or double? In CSS2 single colon was used for both pseudo classes and pseudo elements. But in CSS3, double colon is used with pseudo elements. And this usage will differentiate pseudo classes and elements.