テキストの横にレスポンシブで長さの対応した線をつけたい

Question

### 実現したいこと

テキストの横にレスポンシブで長さの対応した線をつけたいです。
擬似要素で線を配置したのですが、レスポンシブ対応でSPのブレイクポイントでテキストが下に伸びると
うまく線が伸びてくれません。
年号の上下15pxの余白を開けて線を配置したいです。
初歩的な質問で恐れ入りますが、ご教授いただけますと幸いです。

該当のソースコード

<div class="history-savoia__first__inner">
                    <div class="history-savoa__item-year">
                        <p class="history__year">
                            <span class="history__year__num">1003</span>
                            <span class="history__year__year">年</span>
                        </p><!-- /.history__year -->

                        <p class="history__year history__year-last">
                            <span class="history__year__num">1323</span>
                            <span class="history__year__year">年</span>
                        </p><!-- /.history__year -->
                    </div><!-- /.history-savoa__item-year -->
                    <div class="history__item-text history-Savoia__first-text">
                        <p>tdまたはthに「nowrap」または「nowrap="nowrap"」を指定します。CSSは不要です。これで改行されなくなります。「nowrap」は列の一番長いところにだけ指定するだけで大丈夫です。もちろん列すべてのtdに指定してもOKです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓</p>
                        <p>tdまたはthに「nowrap」または「nowrap="nowrap"」を指定します。CSSは不要です。これで改行されなくなります。「nowrap」は列の一番長いところにだけ指定するだけで大丈夫です。もちろん列すべてのtdに指定してもOKです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓tdまたはthに「nowrap」または「nowrap="nowrap"」を指定します。CSSは不要です。これで改行されなくなります。「nowrap」は列の一番長いところにだけ指定するだけで大丈夫です。もちろん列すべてのtdに指定してもOKです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓</p>
                        <p>tdまたはthに「nowrap」または「nowrap="nowrap"」を指定します。CSSは不要です。これで改行されなくなります。「nowrap」は列の一番長いところにだけ指定するだけで大丈夫です。もちろん列すべてのtdに指定してもOKです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓</p>
                    </div><!-- /.history-Savoia__first-text -->
                </div><!-- /.history-savoia__first__inner-->

.history-savoia__first__inner {
    display: flex;

    // 年号
    .history-savoa__item-year {
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;



        .history__year {
            border: 1px solid $color-blue;
            color: $color-blue;
            padding: 0 10px;
            width: 100%;
            max-width: 105px;
        }

        .history__year__num {
            display: inline-block;
            font-size: clamp(14px, 3vw, 26px);
            line-height: 1.7;
        }

        .history__year__year {
            font-size: clamp(12px, 3vw, 16px);
            display: inline-block;
        }

        // 年号の縦線
        .history__year-last {
            position: relative;

            &::before {
                content: "";
                display: inline-block;
                width: 3px;
                height: 660px;
                background-color: $color-blue;
                position: absolute;
                top: -660px;
                left: 50%;
            }
        }



    }

試したこと

ネットで調べたがわからなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

縦線は、年号(history__year-last)の疑似要素ではなく、その親(history-savoa__item-year)の疑似要素にします。Flexレイアウトで縦並びにしてますので、orderで順番を変えれば、２つの年号の間に疑似要素を入れることができます。

.history-savoia__first__inner {
  display: flex;
  // 年号
  .history-savoa__item-year {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; //水平方向中央配置
    &::before {
      content: "";
      display: block;
      width: 3px;
      height: 100%; //年号間の余白いっぱいの高さに
      background-color: blue;
      order: 1; //2番目に配置
    }

    .history__year {
      border: 1px solid blue;
      color: blue;
      padding: 0 10px;
      width: 100%;
      max-width: 105px;
    }

    .history__year__num {
      display: inline-block;
      font-size: clamp(14px, 3vw, 26px);
      line-height: 1.7;
    }

    .history__year__year {
      font-size: clamp(12px, 3vw, 16px);
      display: inline-block;
    }

    // 年号の縦線
    .history__year-last {
      order: 2;  //3番目に配置
    }
  }
}

CodePenサンプル

Comments

[spn]

ありがとうございました。
お陰様で完璧に実装できました！！
一人では難しかったので、大変勉強になりました。