CSSで要素間の区切り線を作成

flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できる。さらに、区切り線をグラデーションや破線にするのも簡単である。

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* 区切り線の元となるボーダーを疑似要素で配置。align-self: stretch;で上下（左右）に伸ばす */
.section:before {
  content: "";
  border: 1px solid #d3d3d3; /* 区切り線の太さ、種類、色などをこのプロパティで指定 */
  align-self: stretch;
}
@media (min-width: 700px) {
  /* メディアクエリで要素が横並びになっても、間に区切り線が入るようになる */
  .section {
    align-items: center;
    flex-direction: row;
  }
}
.section__item--start { /* flexアイテムの間に区切り線が表示されるように、要素を並び替える */
  order: -1;
}

【参考】
https://coliss.com/articles/build-websites/operation/css/flexbox-line-separator.html

inserted by FC2 system