テキストの左右に水平線、テキストの右側に水平線、テキストの下に水平線、長さや幅を指定して入れる、というのは疑似要素を使用する。
参考サイトのコードを見て見ると「::brfore」「::after」などがあると思うが、それが疑似要素。
cssでクラスを指定してそのクラスの後に「 :brfore」を追加すればクラスで挟んだテキストの前にCSSで指定したものが。 「 :after」 を追加すればクラスで挟んだテキストの後にCSSで指定したものが。という感じ。
文字の左右にライン
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.text-line { display: flex; align-items: center; } .text-line:before, .text-line:after { content: ""; flex-grow: 1; height: 1px; background: #444; display: block; } .text-line:before { margin-right: .4em; } .text-line:after { margin-left: .4em; } |
HTML
1 |
<p class="text-line">テキスト</p> |
文字の右側にライン
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.text-line-right { display: flex; align-items: center; } .text-line-right:after { content: ""; flex-grow: 1; height: 1px; background: #444; display: block; } .text-line-right:after { margin-left: .4em; } |
HTML
1 |
<p class="text-line-right">テキスト</p> |
コメントを残す