Categories
CSS Web development

CSS Pseudo-elements

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

CSS Pseudo 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:

CSS Pseudo-elements

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:

CSS pseudo-elements

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:

CSS :before pseudo element

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:

CSS :after pseudo element

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!