Pseudo-elements selectors (select and style a part of an element)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pseudo-element Anatomy</title>
<style>
  .infographic-pseudoel {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-pseudoel[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-layout { display: flex; flex-direction: column; gap: 1.5rem; }

  .ha-code-wrap {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
  }
  .ha-filetabs {
    display: flex;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
  }
  .ha-filetab {
    border: none;
    background: transparent;
    color: #8a8a8a;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .ha-filetab:hover { color: #e5e5e5; }
  .ha-filetab.ha-tab-on {
    color: #ffffff;
    border-bottom-color: #5b8def;
    background: #0b0b0b;
  }

  .ha-code {
    padding: 1rem 1.8rem 1rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.76rem;
    line-height: 1.8;
    overflow-x: auto;
  }
  .ha-codepane { display: none; }
  .ha-codepane.ha-pane-on { display: block; }

  .ha-line {
    display: block;
    white-space: pre;
    color: #8a8a8a;
    border-radius: 5px;
    padding: 0.05rem 0.4rem;
  }
  .ha-line.ha-clickable {
    cursor: pointer;
    color: #e5e5e5;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .ha-line.ha-clickable:hover { background: #1c2333; }
  .ha-line.ha-active {
    background: #1c2333;
    box-shadow: inset 3px 0 0 #5b8def;
    color: #ffffff;
  }
  .ha-tag { color: #60a5fa; font-weight: 700; }
  .ha-sel { color: #f472b6; font-weight: 700; }
  .ha-pseudo { color: #ffd166; font-weight: 800; }
  .ha-prop { color: #c586c0; }
  .ha-val { color: #ce9178; }
  .ha-str { color: #9ece6a; }
  .ha-comment { color: #5c6370; font-style: italic; }

  .ha-browser {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
  }
  .ha-browser-bar {
    background: var(--paper-alt);
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  .ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .ha-tab {
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
    padding: 0.25rem 0.6rem;
  }
  .ha-urlrow {
    background: var(--paper-alt);
    padding: 0.35rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
  }

  .ha-screen {
    background: #ffffff;
    color: #111;
    padding: 1.2rem 1.4rem 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
  }
  .ha-screen h1 {
    font-size: 1.4rem;
    margin: 0 0 0.7rem;
    padding: 0.1rem 0.3rem;
    margin-left: -0.3rem;
    display: inline-block;
    border-radius: 6px;
    transition: background 0.2s ease, outline 0.2s ease;
  }
  .ha-screen h1::before { content: "✨ "; }

  .ha-screen p {
    font-size: 0.92rem;
    margin: 0 0 0.9rem;
    padding: 0.1rem 0.3rem;
    margin-left: -0.3rem;
    border-radius: 6px;
    transition: background 0.2s ease, outline 0.2s ease;
  }
  .ha-screen p::first-letter { font-size: 200%; color: red; }
  .ha-screen p::first-line { color: blue; }

  .ha-screen .ha-controls {
    display: flex;
    gap: 0.6rem;
    align-items: center;
  }
  .ha-screen button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #999;
    border-radius: 5px;
    background: #f0f0f0;
    cursor: pointer;
    border-radius: 6px;
    transition: outline 0.2s ease;
  }
  .ha-screen button::after { content: " 👉"; }
  .ha-screen input[type="text"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid #999;
    border-radius: 5px;
    border-radius: 6px;
    transition: outline 0.2s ease;
  }
  .ha-screen input[type="text"]::placeholder { color: gray; font-style: italic; }

  .ha-out-lit { background: var(--accent-soft); outline: 2px solid var(--accent); }
</style>
</head>
<body>

<div class="infographic-pseudoel" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code-wrap">
        <div class="ha-filetabs">
          <button class="ha-filetab ha-tab-on" id="tab-html">index.html</button>
          <button class="ha-filetab" id="tab-css">style.css</button>
        </div>

        <div class="ha-code">
          <div class="ha-codepane ha-pane-on" id="pane-html">
<span class="ha-line">&lt;<span class="ha-tag">body</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="h1">  &lt;<span class="ha-tag">h1</span>&gt;This is a Heading&lt;/<span class="ha-tag">h1</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="p">  &lt;<span class="ha-tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut risus sit amet magna blandit pulvinar.&lt;/<span class="ha-tag">p</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="button">  &lt;<span class="ha-tag">button</span>&gt;Click Me&lt;/<span class="ha-tag">button</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="input">  &lt;<span class="ha-tag">input</span> <span class="ha-str">type="text"</span> <span class="ha-str">placeholder="Enter your name"</span>&gt;</span>
<span class="ha-line">&lt;/<span class="ha-tag">body</span>&gt;</span>
          </div>

          <div class="ha-codepane" id="pane-css">
<span class="ha-line ha-comment">/* first letter — bigger and red */</span>
<span class="ha-line ha-clickable" data-part="p"><span class="ha-sel">p</span><span class="ha-pseudo">::first-letter</span> {</span>
<span class="ha-line ha-clickable" data-part="p">  <span class="ha-prop">font-size</span>: <span class="ha-val">200%</span>;</span>
<span class="ha-line ha-clickable" data-part="p">  <span class="ha-prop">color</span>: <span class="ha-val">red</span>;</span>
<span class="ha-line ha-clickable" data-part="p">}</span>
<span class="ha-line ha-comment">/* first line — recolored */</span>
<span class="ha-line ha-clickable" data-part="p"><span class="ha-sel">p</span><span class="ha-pseudo">::first-line</span> {</span>
<span class="ha-line ha-clickable" data-part="p">  <span class="ha-prop">color</span>: <span class="ha-val">blue</span>;</span>
<span class="ha-line ha-clickable" data-part="p">}</span>
<span class="ha-line ha-comment">/* insert content before */</span>
<span class="ha-line ha-clickable" data-part="h1"><span class="ha-sel">h1</span><span class="ha-pseudo">::before</span> {</span>
<span class="ha-line ha-clickable" data-part="h1">  <span class="ha-prop">content</span>: <span class="ha-str">"✨ "</span>;</span>
<span class="ha-line ha-clickable" data-part="h1">}</span>
<span class="ha-line ha-comment">/* insert content after */</span>
<span class="ha-line ha-clickable" data-part="button"><span class="ha-sel">button</span><span class="ha-pseudo">::after</span> {</span>
<span class="ha-line ha-clickable" data-part="button">  <span class="ha-prop">content</span>: <span class="ha-str">" 👉"</span>;</span>
<span class="ha-line ha-clickable" data-part="button">}</span>
<span class="ha-line ha-comment">/* placeholder text style */</span>
<span class="ha-line ha-clickable" data-part="input"><span class="ha-sel">input</span><span class="ha-pseudo">::placeholder</span> {</span>
<span class="ha-line ha-clickable" data-part="input">  <span class="ha-prop">color</span>: <span class="ha-val">gray</span>;</span>
<span class="ha-line ha-clickable" data-part="input">  <span class="ha-prop">font-style</span>: <span class="ha-val">italic</span>;</span>
<span class="ha-line ha-clickable" data-part="input">}</span>
          </div>
        </div>
      </div>

      <div class="ha-browser">
        <div class="ha-browser-bar">
          <span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
          <div class="ha-tab">🌐 Pseudo-element Selector Example</div>
        </div>
        <div class="ha-urlrow">127.0.0.1:5500/html</div>
        <div class="ha-screen">
          <h1 id="out-h1">This is a Heading</h1>
          <p id="out-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut risus sit amet magna blandit pulvinar.</p>
          <div class="ha-controls">
            <button id="out-button">Click Me</button>
            <input type="text" id="out-input" placeholder="Enter your name">
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const tabHtml = document.getElementById('tab-html');
  const tabCss = document.getElementById('tab-css');
  const paneHtml = document.getElementById('pane-html');
  const paneCss = document.getElementById('pane-css');

  tabHtml.addEventListener('click', () => {
    tabHtml.classList.add('ha-tab-on');
    tabCss.classList.remove('ha-tab-on');
    paneHtml.classList.add('ha-pane-on');
    paneCss.classList.remove('ha-pane-on');
  });
  tabCss.addEventListener('click', () => {
    tabCss.classList.add('ha-tab-on');
    tabHtml.classList.remove('ha-tab-on');
    paneCss.classList.add('ha-pane-on');
    paneHtml.classList.remove('ha-pane-on');
  });

  const outMap = { h1: 'out-h1', p: 'out-p', button: 'out-button', input: 'out-input' };

  document.querySelectorAll('.ha-line.ha-clickable').forEach(line => {
    line.addEventListener('click', () => {
      document.querySelectorAll('.ha-line').forEach(l => l.classList.remove('ha-active'));
      line.classList.add('ha-active');
      document.querySelectorAll('#out-h1, #out-p, #out-button, #out-input').forEach(el => el.classList.remove('ha-out-lit'));
      const part = line.getAttribute('data-part');
      document.getElementById(outMap[part]).classList.add('ha-out-lit');
    });
  });
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pseudo-Elements</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
<style>
.pseudoel-infographic {
  --ink:        #1a1a1a;
  --ink-soft:   #5c5c5c;
  --paper:      #faf8f4;
  --paper-alt:  #f0ece4;
  --accent:     #2563eb;
  --accent-deep:#1741a6;
  --accent-soft:#e3ebfd;
  --line:       #ddd6c9;
  --display-font: "Newsreader", serif;
  --body-font: "Inter", sans-serif;
  --mono-font: "IBM Plex Mono", monospace;

  color: var(--ink);
  font-family: var(--body-font);
  max-width: 880px;
  margin: 0 auto;
  box-sizing: border-box;
  line-height: 1.5;
  background: transparent;
}
.pseudoel-infographic[data-theme="dark"] {
  --ink:        #e8e6e1;
  --ink-soft:   #9a968c;
  --paper:      #121212;
  --paper-alt:  #1e1e26;
  --accent:     #5b8def;
  --accent-deep:#8fb3ff;
  --accent-soft:#202942;
  --line:       #2c313d;
}
.pseudoel-infographic * { box-sizing: border-box; }

.pseudoel-infographic .head { margin-bottom: 2rem; }
.pseudoel-infographic .head h1 {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.pseudoel-infographic .head .sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}

/* one consistent row shape for every selector */
.pseudoel-infographic .stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}
.pseudoel-infographic .row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: 0;
  color: var(--ink);
  transition: background 0.15s;
}
.pseudoel-infographic .row:last-child { border-bottom: none; }
.pseudoel-infographic .row:hover { background: var(--paper-alt); }
.pseudoel-infographic .row.is-active { background: var(--accent-soft); }
@media (max-width: 600px) {
  .pseudoel-infographic .row { grid-template-columns: 1fr; }
}

.pseudoel-infographic .row .meta {
  padding: 1.1rem;
  border-right: 1px solid var(--line);
}
@media (max-width: 600px) {
  .pseudoel-infographic .row .meta { border-right: none; border-bottom: 1px solid var(--line); }
}
.pseudoel-infographic .row code.selector {
  font-family: var(--mono-font);
  font-size: 0.92rem;
  color: var(--accent-deep);
  font-weight: 500;
  display: block;
}
.pseudoel-infographic .row .desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

.pseudoel-infographic .row .demo {
  padding: 1.1rem 1.25rem;
}

/* --- ::first-letter --- */
.pseudoel-infographic .fl-text { font-size: 1.05rem; margin: 0; color: var(--ink); }
.pseudoel-infographic .row.is-active .fl-text::first-letter {
  font-family: var(--display-font);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--accent-deep);
  float: left;
  line-height: 1;
  margin-right: 0.12em;
}

/* --- ::first-line --- */
.pseudoel-infographic .flline-text { font-size: 0.85rem; margin: 0; max-width: 360px; color: var(--ink); }
.pseudoel-infographic .row.is-active .flline-text::first-line {
  color: var(--accent-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- ::before / ::after --- */
.pseudoel-infographic .ba-chip {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  transition: border-color 0.15s, background 0.2s ease, color 0.2s ease;
}
.pseudoel-infographic .row.is-active .ba-chip {
  border-color: var(--accent);
}
.pseudoel-infographic .row.is-active .ba-chip.before-demo::before {
  content: "★ ";
  color: var(--accent);
}
.pseudoel-infographic .row.is-active .ba-chip.after-demo::after {
  content: " →";
  color: var(--accent);
}

/* --- ::placeholder --- */
.pseudoel-infographic .ph-input {
  width: 100%;
  max-width: 240px;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  pointer-events: none; /* row itself is the click target */
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pseudoel-infographic .row.is-active .ph-input::placeholder {
  color: var(--accent-deep);
  font-style: italic;
  opacity: 0.7;
}

.pseudoel-infographic .footer-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pseudoel-infographic *, .pseudoel-infographic *::before, .pseudoel-infographic *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}
</style>
</head>
<body>

<div class="pseudoel-infographic">
  <div class="head">
    <p class="sub">Click any row to apply the style live.</p>
  </div>

  <div class="stack">

    <button class="row" type="button" data-row>
      <span class="meta">
        <code class="selector">::first-letter</code>
        <p class="desc">Styles the first letter of a block.</p>
      </span>
      <span class="demo">
        <p class="fl-text">CSS lets you target text without extra markup.</p>
      </span>
    </button>

    <button class="row" type="button" data-row>
      <span class="meta">
        <code class="selector">::first-line</code>
        <p class="desc">Styles the first rendered line of a block.</p>
      </span>
      <span class="demo">
        <p class="flline-text">This sentence wraps onto a second line because the box is narrow, and only the first line gets styled.</p>
      </span>
    </button>

    <button class="row" type="button" data-row>
      <span class="meta">
        <code class="selector">::before</code>
        <p class="desc">Inserts content before an element.</p>
      </span>
      <span class="demo">
        <span class="ba-chip before-demo">New feature</span>
      </span>
    </button>

    <button class="row" type="button" data-row>
      <span class="meta">
        <code class="selector">::after</code>
        <p class="desc">Inserts content after an element.</p>
      </span>
      <span class="demo">
        <span class="ba-chip after-demo">Read docs</span>
      </span>
    </button>

    <button class="row" type="button" data-row>
      <span class="meta">
        <code class="selector">::placeholder</code>
        <p class="desc">Styles placeholder text in inputs/textareas.</p>
      </span>
      <span class="demo">
        <input class="ph-input" type="text" placeholder="Search the docs…" tabindex="-1">
      </span>
    </button>

  </div>
</div>

<script>
(function () {
  var wrapper = document.currentScript.closest('.pseudoel-infographic')
    || document.querySelector('.pseudoel-infographic');
  var bodyAttr = document.body.getAttribute('data-darkmode');
  var dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function() {
  var scope = document.querySelector('.pseudoel-infographic');
  if (!scope) return;
  scope.querySelectorAll('[data-row]').forEach(function(row) {
    row.addEventListener('click', function() {
      row.classList.toggle('is-active');
    });
  });
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});