::before and ::after Pseudo-Elements

::before and ::after

::before and ::after insert content before or after an element's content. They require a content property, even if empty (content: "").

Example

.card {
  position: relative;
}

/* Decorative top border */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #007bff, #6f42c1);
}

/* Quote marks */
blockquote::before { content: "\201C"; font-size: 4em; color: #ddd; }
blockquote::after  { content: "\201D"; font-size: 4em; color: #ddd; }

CSS

Full Editor

Pro Tip

::before and ::after are inline by default — set display: block or position: absolute for layout use.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned