擬似要素を使用せずに HTML で破線リスト スタイルを作成するにはどうすればよいですか?

ダッシュ記号を使用したリスト スタイルのカスタマイズ

ダッシュ記号を使用した HTML リスト スタイルの作成は簡単な作業のように思えるかもしれませんが、シームレスでエレガントなソリューションを目指す場合、課題が生じる可能性があります。 li:before { content: "-" }; のような疑似要素の使用を検討しているかもしれませんが、潜在的な欠点を回避する、より洗練されたアプローチを検討してみましょう。

ダッシュ記号をリスト スタイルに統合する

破線のリスト スタイルを正確に実現するには、次の手順を実装できます:

1. デフォルトのスタイルを削除します: list-style を適用します。タイプ: なし。
2. インデントの実装: リストに必要なインデント効果を維持するには、text-indent を使用します。負のインデント値を割り当てると、リスト項目をわずかに左にシフトして、ダッシュの錯覚を作成できます。
3. ダッシュ記号の追加: :before 疑似要素を使用して、ダッシュ記号。 content プロパティは、「-」 (単純なダッシュの場合) に設定することも、さまざまなダッシュ スタイルの場合は「—」や「–」のような代替値に設定することもできます。

強化されたソリューション

これらの手順を組み合わせることで、巧みに破線スタイルを示すリストを作成できます。

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

一般的な文字の使用法

上記の原則任意の汎用文字をリスト スタイルとして表示するために適用できます。 :before 疑似要素の content プロパティ内のダッシュ記号「-」を目的の文字に置き換えるだけです。

以上が擬似要素を使用せずに HTML で破線リスト スタイルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。