What is Pseudo elements?

I’m sorta confused on how they work. Can someone please clarify how and why they are used.

3 Likes

Pseudo-elements are keyword added to the selector that allows one o style a specific part of the selected element. CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature in CSS called pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

3 Likes

A pseudo element is virtual, not written in the source HTML. We make it appear using CSS, only.

Say we have a resource link that appears throughout our site in various forms, but always one format, say, PDF.

<html>
<head>
<title>Pseudo Element</title>
<style>
a[href$=pdf]::before {
  content: url(images/pdf-logo.gif);
  margin: 0.5em;
}
</style>
</head>
<body>
<p><a href="some_document.pdf">Some Document</a></p>
</body>
</html>

pdf-logo

4 Likes