【Craft】縦長の線について

[kobune]

初心者です。

aboutページの中に、縦長の線をいれて、その下にテキストを書きたいと考えています。

HTMLで対応できるでしょうか？

[株式会社フルバランス]

ご質問拝見しました。

以下のコード、CSSで対応可能かと思います！

<div class="vertical-line-container">
  <div class="vertical-line"></div>
  <p class="line-text">この下に表示されるテキスト</p>
</div>

<style>
.vertical-line-container {
  display: flex;
  flex-direction: column; /* 垂直方向に要素を並べる */
  align-items: center;    /* 中央揃え */
  margin: 20px 0;
}

.vertical-line {
  width: 2px; /* 線の太さ */
  height: 100px; /* 線の高さ */
  background-color: black; /* 線の色 */
}

.line-text {
  margin-top: 10px; /* 線とテキストの間のスペース */
  text-align: center; /* テキストを中央揃え */
}
</style>

適宜ラインの長さや色などご調整いただければと思います！

ご参考にしていただけますと幸いです。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス