CSS: Use Pseudo Elements Create Hover Effect

Posted on Edited on In

What Is Pesudo Element

  • can be created before or after the target element
  • must has content attribute
  • each target element can only has one before and one after pseudo element

In short, pesudo elements will be rendered before or after the target element.

Below is an example, we use a label element as target element,
and use CSS to render pesudo elements next to our target element.

See the Pen Demo Pseudo Element by Leon (@n795113) on CodePen.

What Can Pseudo Elements Do

We can use pseudo elements to create a simple hover effect

See the Pen Untitled by Leon (@n795113) on CodePen.

If you know other great usages, please share with me X)

Reference