Learn Pseudo-Elements and How They Works?

Pseudo-elements and how they are made?
A cascading style sheet (CSS) pseudo-elements are used to style specified of an element. It main
purpose is to provide authors a way to refer to the content that does not exist in the source document for example the ::before and ::after pseudo-elements give access to generated contents. Pseudo-elements are used to style the first line or the first letter of an element and to insert the content before and after the content of the element. It can also give us multiple background canvases for example multiple boxes from the single HTML element allow the multiple backgrounds and borders.

A pseudo-element is made of two colons ::
  which are followed by the name of pseudo-elements.

The double colon notation ( :: ) is used to distinguish between pseudo-classes and pseudo-elements.

Syntax:
Selector  : : pseudo-element {
Property: value;
}
The ::first-line pseudo-element:
It is used to add a specific or special style to the first line of the text. It can only be applied to block-level elements.
Following properties are applied to the ::first-line pseudo-element:
 Background properties
 Color properties
 Font properties
 Letter-spacing
 Word-spacing
 Text-decoration
 Text-transform
 Line-height
 Clear
Example:
The following example shows the formatting of first-line of the text in all <p> elements:
 p::first-line{
color: #ff0000;
font-varient: small-caps;
}
The ::first-letter pseudo-element:
It is used to add a specific or special style to the first letter of the text. It can only be applied to block-level elements. Following properties are applied to the ::first-letter pseudo-element:
 Background properties
 Color properties
 Font properties
 Border properties
 Margin properties
 Padding properties
 Text-decoration
 Text-transform
 Line-height
 Float
 Clear
Example:
Following example shows the formatting of the first letter of the text in all <p> elements:
 p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Pseudo-elements and CSS Classes:
Following example shows that pseudo-elements can be combined with CSS classes. And it displays the first letter of paragraph with class=intro, in red and in a large size.
 p.intro::first-letter
{
color: #ff0000;
font-size: 200%;
}
CSS-The ::before pseudo-element:
It can be used to insert the content, before any content of an element. Following example shows the insertion of an image before the content of each <h1> element:
 H1::before
{
Content: url(smiley.gif);
}
CSS-The ::after pseudo-element:
It can be used to insert some content after the content of an element; the following example
shows the insertion of an image after the content of each <h1> element:
  h1::after
{
content: url (smiley .gift);
}

Share on Google Plus

About bilal S

I am founder of javaHint.com and a Computer Scientist. I have studied Computer Science and currently enrolled research student .I am providing information about computer, s web Programming Languages, Architecture and All other basic information Such as Information Technology and Computer Science. For Any Query and suggestion you are always welcome to contact me.