CSS Pseudo-elements - Lena Design

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element/ elements.

For example, it can be used to:

-style the first letter, or line, of an element

-insert content before, or after, the content of an element

Syntax:

The syntax of pseudo-elements:

selector::pseudo-element {
  property:value;
}

ALL CSS PSEUDO-ELEMENTS:

::first-letter

::first-line

::before

::after

::selection

The ::first-line Pseudo-element:

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all <p> elements:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: blue;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Output:

Note: The ::first-line pseudo-element can only by applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

The ::first-letter Pseudo-element:

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: lightblue;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

Output:

Note: ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

Multiple Pseudo-elements:

Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

Output:

CSS – The ::before Pseudo-element:

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each <h1> element:

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(siamesecat.jpg); 
 
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

Output:

CSS – The ::after Pseudo-element:

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each <h1> element:

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(siamesecat.jpg);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

Output:

CSS – The ::selection Pseudo-element:

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to: ::selection: color, background, cursor, and outline.

The following example makes the selected text red on a yellow background:

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

</body>
</html>

Output:

Enjoy coding!

Share this: