Geovani Assis

A Pseudo-Element in CSS is used for specific parts of an element, parts that are not directly in your HTML/PHP code.

For example, it can be used to:

• Set the style of the first letter or line of an element;
• Insert content before or after an element's content;
• Change bullets for list items.

The Pseudo-Elements we will talk about are: first-line (first line), first-letter (first-letter), before (before), after (after), marker (marker) and selection (selection).

First – Line

The first-line “generally” is used to change the entire first line of a text, and can be used like this:

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

First – Letter

The first-letter we use to change the entire first letter of a text or title, and can be used like this:

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

Before

The before pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:

	h1::before {
  		content: url(smiley.gif);
  	}

After

The after pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:

	h1::after {
  		content: url(smiley.gif);
  	}

Marker

The marker selects bullets from list items. The following example styles bullets for list items:

	::marker {
  		color: red;
  		font-size: 23px;
  	}

Selection

The selection  corresponds to the part of an element that is selected by a user. The following example makes selected text red on a yellow background:

	::selection {
  		color: red;
  		background: yellow;
  	}

Bibliography

w3schools.com. CSS Pseudo-elements. Available in: https://www.w3schools.com/css/css_pseudo_elements.asp