[CSS] ::marker, ::spelling-error, ::grammar-error 的介紹與應用

來介紹 CSS 的 ::marker, ::spelling-error, ::grammar-error 和應用方式。

::marker

::marker 選取器可以改變清單項目的樣式，使開發人員能夠以更簡單的方式對其進行樣式設計。無論您想要添加自定義圖標還是更改清單標記的外觀，這個選取器提供了靈活性，以實現引人入勝的效果。

以下是簡單範例：

<ul class="marker">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS 部分：

.marker ::marker {
  color: red;
  font-weight: bold;
}

可以看到設定好 ::marker 的樣式後，就可以改變清單前面圖示的樣式了。

::spelling-error

::spelling-error 選取器可以針對元素內的拼寫錯誤單字進行樣式設定，使開發人員能夠將它們標記出來。這個選取器提供了一種簡單的方法來吸引注意力，標示拼寫錯誤，從而改善用戶體驗。

範例：

<p class="spelling">This text contians some misspelled words.</p>

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

這個可以標註拼字錯誤並給定樣式，只是目前主流瀏覽器都還沒支援。

::grammar-error

選取器類似於 ::spelling-error，但其定位的是元素內的語法錯誤。通過標記語法錯誤，這個選取器有助於提升網頁內容的品質和可讀性。

範例：

<p class="grammar">This sentence has some grammatical errors.</p>

.grammar ::grammar-error {
  text-decoration: line-through;
}

一樣目前主流瀏覽器也尚未支援。

Source：
::marker, ::spelling-error, ::grammar-error —CSS selectors to enhance Web Content Quality