dom-snapshot-pseudo-element.html | Explore in Territory

<html>
  <style>
    p {
      position: absolute;
      height: 200px;
      width: 200px;
      font: 10px Ahem;
    }
    .c1::first-letter { font-weight: lighter; color: green; }
    .c2::first-letter { font-weight: bold; color: blue; }
    .c2::before { counter-increment: square; content: 'square: ' counter(square) url(square.png) '! '; }
    ul { font: 10px Ahem; }
  </style>
  <script src="../../resources/ahem.js"></script>
  <body>
    <p class='c1'>I have a first letter.</p>
    <p class='c1'><span>I have a first letter because of my parent.</span></p>
    <p class='c2'>I have some content before me with a first letter.</p>
    <ul><li>water</li><li>malt</li><li>hops</li><li>yeast</li></ul>
  </body>
</html>

chromium/third_party/blink/web_tests/inspector-protocol/resources/dom-snapshot-pseudo-element.html