HOLLA TECH - LEARN

Working with Pseudo Elements
 

Pseudo elements are used to select specific parts of an element.
There are five pseudo elements in CSS, each starting with a double colon (::):

::first-line – the first line of the text in a selector
::first-letter – the first letter of the text in a selector
::selection – selects the portion of an element that is selected by a user
::before – inserts some content before an element
::after – inserts some content after an element

In the example below, the ::first-line pseudo element is used to style the first line of our text: 

p::first-line {
   color: #589432;
}

 

Result: 

Holla Tech - Learn CSS3

The ::selection pseudo element styles the selected text:

p::-moz-selection {
   background: #8bc34a;
   color: #fff;
}

 

Result: 

Holla Tech - Learn CSS3

NOTE!
The -moz- prefix is used, as the ::selection element is not supported by Mozilla yet.

Working with Pseudo Elements
 

Using ::before and ::after pseudo elements allows us to add a wide variety of content to the page.

In the example below, the ::before pseudo element is used to add an image before the list.
The HTML:

<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo element.</p>
<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo element.</p>
<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo element.</p>

 

The CSS: 

p::before {
   content: url(“logo.jpg”);
}

 

NOTE!
Note the content keyword in the syntax.

Result: 

Holla Tech - Learn CSS3

NOTE!
If you change the ::before element to ::after in the example above, the images will appear at the end of the list.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT