CSS3 Basics

Working with Pseudo Elements

Pseudo elements are used to select specific parts of an element.

There are fice 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:

The following example demonstrates how to use the ::first-line element to add special effect to the first line of element in the document.

The ::selection pseudo element styles the selected list.


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

Result:

The following example demonstrates how to use ::selection element to change the color of the selected text.

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");
		}

Result:

You can insert text, images, and other resources using ::before pseudo element.

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