デモページはこちら

複数行のテキストの左側を縦のボーダーで装飾します。CSSはborder-leftの場合とheightを設定した疑似要素beforeをabsoluteで配置する場合で検証します。

htmlの構造は以下の通りです。

<p class="title">border-leftの場合</p>
<p class="text01">abcdefghi<br>jklmnopqr<br>stuvwxyz</p>

<p class="title">heightを設定した疑似要素beforeをabsoluteで配置する場合</p>
<p class="text02">abcdefghi<br>jklmnopqr<br>stuvwxyz</p>

まずborder-leftの場合です。

.text01 {
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.4;
	padding-left: 24px;
	border-left: 6px solid #000;
}

border-leftは高さが設定できないため、ボックスの高さいっぱいまでボーダーで装飾されます。そのためテキストのline-heightが大きければその分ボーダーも高くなります。

次にheightを設定した疑似要素beforeをabsoluteで配置します。

.text02 {
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.4;
	padding-left: 30px;
	position: relative;
}
.text02:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 6px;
	height: calc(100% - .7em);
	background-color: #000;
	transform: translateY(-50%);
}

疑似要素はdisplay: block;にすれば高さが設定できます。height: calc(100% - .7em);でボックスの高さよりも0.7em分短くしています。縦方向を中央寄せで配置すればバランス良くボーダーで装飾できます。