CSS Tutorial

The language for styling web pages.

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element, like the first line/letter, or to insert content before/after the element.

Common Pseudo-elements:

::before - Insert content before element
::after - Insert content after element
::first-line - Style first line of text
::first-letter - Style first letter
::selection - Style highlighted text
::placeholder - Style input placeholder

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; padding:20px; }
  /* ::first-letter */
  .dropcap::first-letter { font-size:3em; font-weight:bold; color:#1572B6; float:left; line-height:0.8; margin-right:5px; }
  /* ::first-line */
  .firstline::first-line { color:#1572B6; font-weight:bold; font-size:1.1em; }
  /* ::before and ::after */
  .note::before { content:"📌 Note: "; color:#dc3545; font-weight:bold; }
  .badge::after { content:" ✅"; color:#28a745; }
  /* ::selection */
  ::selection { background:#1572B6; color:white; }
  /* Decorative line using ::after */
  h2 { position:relative; display:inline-block; }
  h2::after { content:""; display:block; height:3px; background:linear-gradient(to right,#1572B6,transparent); margin-top:4px; }
  /* ::placeholder */
  input::placeholder { color:#1572B6; font-style:italic; }
  input { padding:10px; border:2px solid #ccc; border-radius:5px; width:100%; margin-top:10px; }
</style>
</head>
<body>
  <h2>Pseudo-elements Demo</h2>
  <p class="dropcap">This paragraph uses ::first-letter to create a drop-cap style opening letter that stands out from the rest.</p>
  <p class="firstline">This paragraph uses ::first-line. Only the first line is styled blue and bold, no matter how you resize the window.</p>
  <p class="note">Always use semantic HTML!</p>
  <p>CSS Mastery <span class="badge">Completed</span></p>
  <p>Select any text on this page to see ::selection styling!</p>
  <input type="text" placeholder="This placeholder is styled with ::placeholder">
</body>
</html>

Result

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Pseudo-elements

CSS Pseudo-elements

Common Pseudo-elements:

Try It Yourself

Topics