li要素の先頭を数字(<ol>)にして、li要素にtext-shadowをあてた時の話です。
この記事では、『リスト要素(ol)の数字にtext-shadowが効かない』場合の対処方法についてまとめています。
実機でリスト要素の数字にtext-shadowが効かない
PCでは先頭の数字も含めてtext-shadowが効きました。検証ツールなどでレスポンシブで確認したところSPでも問題ありません。
しかし、スマホの実機で確認したところ、iOSではリスト要素の先頭の数字だけ、text-shadowが効かないように見えました。
解決策:olを使わず自前で番号を振る
ol⇒ulに変更して、li要素に疑似要素で連番を振るようにします。こうすることでtext-shadowが数字部分にも適用されます。
li {
list-style-type: none;
counter-increment: number;
}
li::before{
content: counter(number) ".";
margin-right: 5px;
color: red;
text-shadow: 1px 1px 2px black;
}
まとめ
検証ツールで問題ないのに、iOSの実機で問題が起きるパタンは結構あります。今回もそのような事例の一つです。
もし、リスト要素を連番にして、数値部分にtext-shadowが効かなかったらこの記事を思い出してください。