文字と文字の間に挿入した縦棒の高さを指定したい

Question

![

文字と文字の間に挿入した縦棒の高さを添付画像のように指定したいのですが、うまくいきません。
縦棒を入れたい箇所に<span>タグを挿入し、<span>タグにborder-rightで縦線を表示しています。

コードは下記のように書いています。

<ul class="flow_of_use__wrapper">
    <li class="flow_of_use__list">
     <p class="flow_of_use__list--num">01</p>
     <p class="flow_of_use__list--title">お問い合わせ<span class="flow_of_use__list--var"></span></p>
     <div class="divider"></div>                    
     <p class="flow_of_use__list__txt">まずはフォームまたはお電話からお申し込みください。</p>
      </li>
     </ul>

.flow_of_use__list{
  background-color: #F8F8F8;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  margin-bottom: 8px
}

.flow_of_use__list--num{
  background-color: var(--secondary_color);
  color: #fff;
  font-size:16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
}

.flow_of_use__list--title{
  font-size: 18px;
  font-weight: bold;
  color: var(--basecolor);
  margin-left: 21px;
}

.flow_of_use__list--var{
  color:#C3C3C3;
  border-right:1px solid #C3C3C3;
  margin-right: 53px;
  margin-left: 85.5px;
}

.flow_of_use__list__txt{
  font-size: 16px;
  color: var(--basecolor);
}

.ccc{
  border-right:1px solid #ccc;
}

上記コードでは下記添付画像のようになります。

1枚目画像のような縦棒高さを表示させるにはどうすればいいでしょうか?

Answer 1

.flow_of_use__list--var がp要素の中に入っているとpの高さに制限されてしまうので、

<p class="flow_of_use__list--title">お問い合わせ</p>
<span class="flow_of_use__list--var"></span>

のように出します。その上で、

.flow_of_use__list--var{
  color:#C3C3C3;
  border-right:1px solid #C3C3C3;
  margin-right: 53px;
  margin-left: 85.5px;
  height: 48px;  /* これを追加。好みの値にしてください。 */
}

とすればうまく行くのではと思います。

Comments

[Fukusuke0604]

ありがとうございます。
すごくシンプルでしたね。。。

勉強になりました!!