Highlight Pseudo-elements

by Hemanth HM

HTML

<details open>
  <summary>::selection</summary>
  <main>
    <p class="seletion">
      Select a word in this text node!
    </p>
  </main>
</details>

<details open>
  <summary>::target-text</summary>
  <main>
    <p class="target">
      Should highlight the target-text, like <a href="https://en.wikipedia.org/wiki/Cat#:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet" target="_blank">this.</a>
    </p>
  </main>
</details>

<details open>
  <summary>::spelling-error</summary>
  <main>
    <p class="spelling">
      The quick brown <span class="spelling-error">fxo</span> jumps
    </p>
  </main>
</details>

<details open>
  <summary>::grammer-error</summary>
  <main>
    <p class="grammer">
    <span class="grammer-error">the</span> quick brown dog.
    </p>
  </main>
</details>

CSS

::selection {
  background-color: #ff69b4;
}


::target-text {
  background-color: #ff69b4;
}


::spelling-error {
  text-decoration: 1px red wavy underline;
}


::grammer-error {
  text-decoration: 1px red wavy underline;
}



















.spelling-error {
  text-decoration: underline wavy red;
}

.grammer-error {
    text-decoration: underline wavy green;
}
















details {
  overflow: hidden;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  border: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details main {
  padding: 1em 2.2em;
}