css
  1. css-after
Previous

CSS :after Selector

  • The :after CSS pseudo-element is used to insert content after the content of an element.
  • It is often used in conjunction with the content property to add decorative elements or additional information to an element without modifying the actual HTML content.

Syntax

selector:after {
  content: " ";
}

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:after {
  content: " - Remember to stay hydrated!";
  font-weight: bold;
  color: green;
}
</style>
</head>
<body>

<h2>Adding content after the paragraph</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>
</html>
Try Playground

Explanation

The CSS :after selector is used to add content after the selected element. The selector is represented by selector:after, where selector is the element after which the content will be added. The content property is used to define the content that will be added.

Use

The :after selector is commonly used for adding decorative elements, such as arrows or icons, or to provide additional information or instructions to the user. It can also be used for styling form elements, list markers, and more.

Important Points

  • The :after selector creates a pseudo-element that comes after the element selected by the selector.
  • The content property is used to add content to the pseudo-element.
  • The :after selector is often used in conjunction with the :before selector to add content before and after an element.
  • The :after selector can be used to insert images with the url() function as the value of the content property.

Summary

The CSS :after selector is a versatile tool for adding content after an HTML element. It can be used to add decorative elements, additional information, or instructions to the user. The content property is used to define what the content should be displayed. Understanding the basic syntax and use cases for this selector can greatly enhance the design and functionality of your website.

:before
Published on: