【CSS】疑似要素 ::marker についての現状―iOSやSafariではcontentプロパティ不可

疑似要素の::markerは、ulやolリストの「マーカー（先頭の●や1.などの記号部分）」をテキストや絵文字、色やサイズでカスタマイズできる新機能です。

しかし、2025年現在も、iOS(WebKit) やSafariでは「contentプロパティ（記号・絵文字）」が未対応です。

font-sizeとcolorのみの対応になっています。

Can I Use :marker

iOS26でもまだ未対応のため、まだまだ対応はされない状況かもしれません。

しばらくは、従来通りli::before方式を推奨します。

本記事では、li::before方式と::marker方式の違い、使えるプロパティ、注意点を分かりやすくまとめます。

li::beforeを使ったカスタムマーカー
::markerを使ったカスタムマーカー
- ::markerのサンプルコード
- ::markerで使える主なCSSプロパティ
マーカーに画像・SVG・グラデーションを使う場合
最後に

li::beforeを使ったカスタムマーカー

標準のリストマーカーを消して、疑似要素::beforeで自作のマーカーを追加する方法が一般的です。

まず、標準マーカーを消すには、ul に下記の１行を加えます。

list-style-type: none;

下記はよく使われる li::beforeを使ったやり方です。

りんご
みかん
ぶどう

HTML

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

CSS

ul {
  list-style-type: none; /* 標準マーカーを消しています */
}
ul li {
  position: relative;    /* postion: absolute; */
}
ul li::before {
  position: absolute;
  content: "★";         /* 記号・絵文字など */
  color: #e67e22;        /* 色味 */
  font-size: 1.3em;      /* 大きさ */
  left: 0.5em;          /* インデント調整します */
}

::markerを使ったカスタムマーカー

::markerのサンプルコード

先程のCSS全てを下記の::markerだけで書くことができるようになります。

CSS

ul li::marker {
  content: "★ ";            /* マーカーを好きな記号や絵文字に */
  color: #e74c3c;            /* マーカーの色だけ指定 */
  font-size: 1.3em;          /* マーカーの大きさ */
}

りんご
みかん
ぶどう

便利ですね。

※ iOSやSafariではマーカー（★）は表示されていません。

::markerで使える主なCSSプロパティ

contentプロパティ

マーカーに表示する記号やテキスト、絵文字を指定できます。画像やSVGは不可です。

ul li::marker {
  content: "✔ ";   /* チェックマーク */
}

iOS や Safariで効きませんので、注意が必要です。

あまりおすすめはしませんが、簡単な対応としては、JavaScriptでUserAgentのiOS判定を行い、content: “”; を動的に変更します。

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  const style = document.createElement('style');
  style.innerHTML = 'ul li::marker { content: ""; }';
  document.head.appendChild(style);
}

文字の書式プロパティ

color, font-size, font-family, font-weight が利用できます。

つまり、色・フォント・サイズの指定が可能です。

なお、color(色）は単色のみです。グラデーションや画像・複雑な装飾は一切使えません。

white-space, direction, text-combine-upright などはまだ一部のブラウザによって制限があります。

また、背景・余白・画像・枠線・絶対位置などは非対応です。

ul li::marker {
  content: "✔ ";           /* チェックマーク */
  color: #2ecc71;           /* 緑色 */
  font-size: 1.2em;         /* 少し大きく */
  font-weight: bold;        /* 太字 */
  font-family: "Segoe UI Symbol", sans-serif;
}

animation, transitionプロパティ

::markerにもtransition/animationを適用することができます。下記の例はhoverされると色味と大きさを変更しています。

ul li::marker {
  color: #888;
  font-size: 1.3em;
  transition: color 0.3s, font-size 0.3s;
}

ul li:hover::marker {
  color: #e74c3c;
  font-size: 1.7em;
}

りんご
みかん
ぶどう

※ iOSやSafariでは★は表示されておりません。

マーカーに画像・SVG・グラデーションを使う場合

::markerは画像やSVG、グラデーションは対応していません。

必ずli::beforeなどの方法を使いましょう。

content: "";　にして、backgroundまたはbackground-image: url() を利用します。

ul {
  list-style-type: none;
}
ul li::before {
  content: "";
  display: inline-block;
  background: linear-gradient(90deg, pink, blue);
  /* またはbackground-image: url(...); で画像 */

  /* 必要に応じてサイズやポジションの位置調整 */
  width: 1em;
  height: 1em;
  top: 0.3em;
  left: 0.5em;
}