HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pseudo ::before</title>
  <style>
    q::before { content: "\201C"; color: #dc2626; }
    q::after { content: "\201D"; color: #dc2626; }
  </style>
</head>
<body>
  <q id="quote">To be or not to be</q>
  <pre id="out"></pre>
  <script>
    var quote = document.getElementById("quote");
    var out = document.getElementById("out");
    try {
      if (typeof quote.pseudo === "function") {
        var before = quote.pseudo("::before");
        out.textContent =
          "type: " + before.type + "\n" +
          "element is quote: " + (before.element === quote) + "\n" +
          "parent is quote: " + (before.parent === quote);
      } else {
        out.textContent = "pseudo() not supported in this browser";
      }
    } catch (e) {
      out.textContent = "Error: " + e.message;
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.pseudo — ::before on q (Try It)