Icon Techniques with Pseudo-Elements

Pseudo-Element Icons

Use ::before or ::after with icon font character codes or SVG backgrounds to add icons to elements without extra HTML markup.

Example

/* Icon font approach */
@font-face {
  font-family: "Icons";
  src: url("icons.woff2") format("woff2");
}

.icon-home::before {
  font-family: "Icons";
  content: "\e001";
  margin-right: 0.5em;
}

/* CSS background SVG icon */
.external-link::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,...") center/contain no-repeat;
  margin-left: 4px;
}

CSS

Full Editor

Pro Tip

Decorative icons added via pseudo-elements are invisible to screen readers — this is correct behavior for purely decorative content.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned