横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
CSS Box Alignment Module Level 3 (W3C Working Draft 14 May 2013)
CSS Box Alignment Module Level 3 W3C Working Draft, 17 February 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-css-align-3-20230217/ Latest published version: https://www.w3.org/TR/css-align-3/ Editor's Draft: https://drafts.csswg.org/css-align/ History: https://www.w3.org/standards/history/css-align-3 Test Suite: http://test.csswg.org/suites/css-align-3_dev/nigh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
