CSS Pseudo-elements - Lena Design

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

Syntax:

selector:pseudo-element {
  property:value;
}

CSS PSEUDO-ELEMENTS:

:first-letter

:first-line

:before

:after

:selection

The CSS :first-line pseudo-element:

To add the special effect to your first line of the text use the :first-line pseudo-element.

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

<!DOCTYPE html>
<html>
<head>
<style>
  
p {
    font-family: arial;
  }
p:first-line {
  color: #2a9d8f;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>To add the special effect to your first line of the text use the :first-line pseudo-element. </p>

</body>
</html>

Output:

You can apply to the :first-line pseudo-element the following properties:

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

The CSS :first-letter pseudo-element:

To add the special effect to your first character of the text use the :first-letter pseudo-element.

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

<!DOCTYPE html>
<html>
<head>
<style>

p {font-family: arial;
    
  }
p:first-letter {
  color: #2a9d8f;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>To add the special effect to your first character of the text use the :first-letter pseudo-element.</p>

</body>
</html>

Output:

You can apply to the :first-letter pseudo-element the following properties:

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

The CSS :before pseudo-element:

The CSS :before pseudo-element can be used to place the content before the content of an element:

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {
  content:":before content";  
  color: #2a9d8f;
  margin-right:10px;
}
</style>
</head>
<body>

<h1>CONTENT</h1>
<p>The CSS :before pseudo-element places content before the content of an element.</p>
  
</body>
</html>

Output:

The CSS :after pseudo-element:

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

<!DOCTYPE html>
<html>
<head>
<style>
h1:after {
  content:":after content";  
  color: #2a9d8f;
  margin-left:10px;
}
</style>
</head>
<body>

<h1>CONTENT</h1>
<p>The CSS :after pseudo-element places content after the content of an element.</p>
  
</body>
</html>

Output:

The CSS :selection pseudo-element:

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

You can apply to :selection pseudo-element the following CSS properties:

color
background
cursor
outline

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

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Firefox */
  color: #2a9d8f;
  background: #e9c46a;
}

:selection {
  color: #2a9d8f;
  background: #e9c46a;
}
</style>
</head>
<body>

<h4>Select the text in this example:</h4>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output:

Select the text in this example:

This is a paragraph.

This is another paragraph.

Enjoy coding!

Select the text in this example:

Share this: