Tailwind CSSで疑似要素を使用する

Tailwind CSSで疑似要素を使用する方法をメモ。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

まずは::beforeと::afterを試してみます。
設定したいclassの前にbefore:やafter:を付与します。

<div
  class="
    before:content-['BEFORE']
    before:text-red-700
    after:content-['AFTER']
    after:text-blue-700
  "
>テキスト</div>

::beforeと::afterのデモページ

::markerなども同様に設定できます。

<ul class="pl-4">
  <li
    class="
      marker:content-['▼']
      marker:text-xs
    "
  >リスト</li>
  <li
    class="
      marker:content-['▼']
      marker:text-xs
    "
  >リスト</li>
  <li
    class="
      marker:content-['▼']
      marker:text-xs
    "
  >リスト</li>
</ul>

::markerのデモページ

最後に::first-letterと::first-line、::selectionを試してみます。

<p class="first-letter:text-red-700">滲み出す混濁の紋章 不遜なる狂気の器 湧きあがり・否定し 痺れ・瞬き 眠りを妨げる 爬行する鉄の王女 絶えず自壊する泥の人形 結合せよ 反発せよ 地に満ち己の無力を知れ 破道の九十 黒棺</p>
<p class="first-line:text-red-700">滲み出す混濁の紋章 不遜なる狂気の器 湧きあがり・否定し 痺れ・瞬き 眠りを妨げる 爬行する鉄の王女 絶えず自壊する泥の人形 結合せよ 反発せよ 地に満ち己の無力を知れ 破道の九十 黒棺</p>
<p class="selection:bg-red-700">滲み出す混濁の紋章 不遜なる狂気の器 湧きあがり・否定し 痺れ・瞬き 眠りを妨げる 爬行する鉄の王女 絶えず自壊する泥の人形 結合せよ 反発せよ 地に満ち己の無力を知れ 破道の九十 黒棺</p>

::first-letterと::first-lineと::selectionのデモページ