でなくて文字の右に範囲いっぱいまで水平線を引きたい。
前にもやったけど忘れたなあと思いながらいろいろ検索しているとCSSとの合わせ技を紹介しているサイトがいくつかあった。
文字の横に線（ライン）を引く方法
【CSS】テキスト(見出し，タイトル)に横線をつける方法
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
WordPressではこれをどうしたらいいんだろう?
テーマの編集でstyle.cssとかに追加しちゃえばいいのかな?
ダッシュボードから[外観]>[カスタマイズ]とたどると
[追加 CSS]というのがあったので、
これかなと思って見てみたら、今回やろうとしていることのCSSがすでに書いてあった。
前にやったけど忘れてるんだな、当の本人が。
「WordPressでCSSを使って文字の横にラインを引く。」
上の記事の方式で線を引いていたものは上のサイトから拝借した以下のCSSに変更した。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*—— 文字の両脇にライン ——*/ .title-border { display: flex; align-items: center; } .title-border:before, .title-border:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border:before { margin-right: 1rem; } .title-border:after { margin-left: 1rem; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*—— 文字の右にライン ——*/ .title-border-right { display: flex; align-items: center; } .title-border-right:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border-right:after { margin-left: 1rem; } |
こんな感じに出来上がり。
テキストの右に水平線
テキストの左右に水平線
Tweet
