順序付きリストの数字を太字にする方法はありますか?
2023-10-25 07:28:57
質問
順序付きリストの数字部分のみにスタイルを付けるためのCSSセレクタはありますか?
私は次のようなHTMLを持っています。
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
というのが出力されるはずです。
1.a
2.b
3.c
1.と2.と3.を作りたいのですが。 太字 とし、a,b,cは通常のままとする。
私が意識しているのは
<span>
の回避策を...
どのように解決するのですか?
CSS
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
関連
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[CSSチュートリアル】空間均等性の問題を解決する2つの方法
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] なぜブラウザはCSSセレクタを右から左へマッチングさせるのですか?
-
[解決済み] HTMLのネストされたリストの正しい作成方法?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】ボックス内の複数要素を両端揃えの効果で実現するCSS
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード