- HOME
- > BLOG CATEGORY
- 【CSS】要素の中央に縦線を引く方法、疑似要素で指定しよう!!

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
CSS
について学びたい方へ今回は、要素と要素の中央に縦線を引くについての解説です。
下記の画像のようなデザインを見かけることありませんか。
疑似要素::before/::after
を指定すれば簡単に縦線を引くことができます。
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
今回は、疑似要素::before/::after
を使い、指定します。
「PART01」では、最初に2つのボックス(要素)を用意し、display: flex
を指定し、横並びにしましょう。
書き方は以下のようになります。
要素の中央に縦線を引く方法 PART01
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
</div>
/*--CSS--*/
.wrap {
display: flex; /*--横並び指定--*/
/*--下記は自由--*/
text-align: center;
color: #fff;
font-weight: bold;
}
.wrap .box-a {
flex-grow: 1; /*--幅を指定--*/
height: 140px;
line-height: 140px;
margin-right: 2em; /*--AとBの余白--*/
background-color: #aeb2ba;
}
.wrap .box-b {
flex-grow: 1; /*--幅を指定--*/
height: 140px;
line-height: 140px;
background-color: #495464;
}
上記では、各要素(A、B)を横並びに指定しました。
「PART02」では、要素Aに対し、::afterを指定し縦線を指定したいとおもいます。
書き方は以下のようになります。
要素Aに対し、::afterを指定 PART02
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
</div>
/*--CSS--*/
.wrap {
display: flex; /*--横並び指定--*/
/*--以下省略--*/
}
.wrap .box-a {
flex-grow: 1; /*--幅を指定--*/
position: relative; /*--positionを追加--*/
height: 140px;
line-height: 140px;
margin-right: 2em;
background-color: #aeb2ba;
}
.wrap .box-a::after {
position: absolute; /*--positionを追加--*/
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px; /*--縦線の太さ(幅)--*/
height: 100%;
background-color: #333; /*--縦線の色--*/
}
.wrap .box-b {
/*--以下省略--*/
}
「box-a」に対して、position: relative
を指定します。
次に、「::after」に対してposition: absolute
でleft: 100%
を指定します。
left: 100%とは、ボックスAの右端になります。
今回は、ボーダー(border)要素を指定せず、background-color
を指定します。
縦線の太さ(幅)を変更したい際には、width
の数値を変更しましょう。
/*--CSS--*/
.wrap {
display: flex;
text-align: center;
color: #fff;
font-weight: bold;
}
.wrap .box-a {
flex-grow: 1;
position: relative;
height: 140px;
line-height: 140px;
margin-right: 2em;
background-color: #aeb2ba;
}
.wrap .box-a::after {
position: absolute;
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px;
height: 100%;
background-color: #333;
}
.wrap .box-b {
flex-grow: 1;
height: 140px;
line-height: 140px;
background-color: #495464;
}
要素Aに対し、::afterを指定 PART02
<div class="wrap">
<div class="box-a">ボックスA</div>
<div class="box-b">ボックスB</div>
<div class="box-c">ボックスC</div>
</div>
/*--CSS--*/
.wrap {
display: flex;
/*--以下省略--*/
}
.wrap .box-a {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-b {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-c {
flex-grow: 1;
/*--以下省略--*/
}
.wrap .box-a,
.wrap .box-b{
position: relative;
margin-right: 2em;
}
.wrap .box-a::after,
.wrap .box-b::after{
position: absolute;
top: 0;
left: 100%;
margin: 0 1rem;
content: "";
width: 1px;
height: 100%;
background-color: #333;
}
ポイント!
3カラムも同様に、::after
を指定します。
必ず、position
要素を忘れないように指定しましょう。
今回はこれで以上です。
::before/::after
を指定すれば簡単に縦線を引くことができます。2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog