ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してダッシュ リスト マーカーを使用して HTML リストのスタイルを設定する方法

CSS を使用してダッシュ リスト マーカーを使用して HTML リストのスタイルを設定する方法

Linda Hamilton
リリース: 2024-11-01 11:31:30
オリジナル
886 人が閲覧しました

How to Style HTML Lists with Dash List Markers Using CSS?

ダッシュ リスト マーカーを使用した HTML リストのスタイル設定

HTML では、デフォルトの list-style-type は「disc」で、箇条書きをレンダリングします。 。代わりにダッシュ マーカーを含むリストを作成するには、CSS を使用できます。

1 つの解決策は、text-indent プロパティを使用してリスト項目と コンテンツ をインデントすることです。 :before 疑似要素のプロパティを使用して、ダッシュ文字を挿入します。

例:

<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>
ログイン後にコピー

HTML:

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>
ログイン後にコピー

結果:

- First
- Second
- Third
ログイン後にコピー

このアプローチにより、ダッシュ マーカーを追加しながらインデントされたリスト効果を維持できます。

汎用リスト マーカー:

:before 疑似要素の content プロパティを次のように設定することで、任意の Unicode 文字をリスト マーカーとして使用できます。目的の文字の HTML エンティティ コード。たとえば、アスタリスク (*) を使用するには、

<code class="css">ul > li:before {
  content: "*";
}</code>
ログイン後にコピー
を使用します。

以上がCSS を使用してダッシュ リスト マーカーを使用して HTML リストのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート