cssでborderではない独立した仕切り線は、擬似要素::before ::afterを使う

こんにちは tanaka です。

自由に変更できて
borderではない独立した仕切り線
は無いのかな、

と思ったことはありませんか?

擬似要素 ::before ::after
を使えばできます。

擬似要素は、
子要素(inline)として追加されます。

その擬似要素へ
 ・display:block
 ・content:””;
 ・background-color、background-image
を入れて

あとは、
高さを細くすれば
borderではない独立した仕切り線
が出来上がります。

しかし
margin相殺などの問題
もあるので
注意は必要です。

それでは詳しく説明します。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

前説

borderではない独立した仕切り線
擬似要素 ::before ::after
を使って作ります。

しかし
擬似要素 ::before ::after
は少し扱いにクセがあります。

それらに注意し
上手く使いましょう。

擬似要素 ::before ::after
の記事を用意しました。
よければご覧ください。

説明

擬似要素 ::before ::after でバックスクリーンを使うには content: “”; が必要

borderではない独立した仕切り線
擬似要素 ::before ::after
のバックスクリーンを細くして
仕切り線として利用します。

しかし
擬似要素 ::before ::after
は、バックスクリーンだけ
利用する時でも

content: “”;
が必要です。

これが無いと
バックスクリーンが表示されないので
注意してください。

上下がblockの時margin相殺の問題もある

そして
擬似要素 ::before ::after
は、inlineなので
仕切り線した時
文字の前後に来てしまいます。

上下で使うためには、
inline-block もしくは block
にする必要があります。

上下がblockの時
margin相殺の問題が発生します。

それらを
回避して
擬似要素 ::before ::after
を使ってください。

margin相殺について記事を用意しました。
よければご覧ください。

具体例

準備

ここまで、
文字だけだったので、
とても難しかったと思います。

ですので、
画像を交えて説明します。

<div> バックスクリーン
<h1> 文字

を用意しました。

element画像10
element画像11

上下の紫色のバックスクリーンは
分かりやすくするための物で、
ソースコードは省略しています。

緑色のバックスクリーンの中に
文字が入っています。

これを使って説明します。

element画像14

仕切り線(黒色3px)

今から、
擬似要素 ::before
を使って仕切り線を入れます。

element画像12
element画像13

display:blockの仕切り線がmargin相殺

上にぴったりくっついているので
もう少し下げてみます。

仕切り線の上に margin-topを入れて
下げます。

margin相殺による
バックスクリーンの押し上げが
発生しました。

element画像16
element画像17

この解決法の
記事を用意しました。
よければご覧ください。

display: inline-block;
transform: translateX(10px) translateY(10px);
を使い解決することが
書いてあります。

画像を入れて花罫線にもできる

background-color
の代わりに
background-image
を使う事によって

花罫線を作ることもできます。

画像blog-element52
画像blog-element50
画像blog-element51

[ad]

まとめ

バックスクリーンを細くする

cssでborderではない独立した線は、

擬似要素 ::before ::after 
を使いバックスクリーンを細くして作成。

content: “”; が必ず必要

擬似要素 ::before ::after 
でバックスクリーンだけ使いたい時は
content: “”;
が必ず必要。

花罫線にもできる

background-image
を使って
画像を入れ花罫線にすることもできる。

以上、
cssでborderではない独立した仕切り線は、
擬似要素::before ::afterを使う
の話でした。

ありがとうございました。

タイトルとURLをコピーしました