左右から線が伸びるCSSアニメーション（レスポンシブ）

Question

左右から、線が伸びるCSSアニメーションを実装したいです。

線の始まりは、ディスプレイの端からで、
テキストの初めと終わりで線を停止したいです。（下記、画像参照）

線のアニメーション自体は実装できるのですが、
ウィンドウ幅が変わると線の終わる位置が代わります。

	<section class="box">
		<div class="lineL"></div>
			<h2><img src="img/ttl.png" alt=""></h2>
		<div class="lineR"></div>
	</section>

.box h2 {
	max-width: 900px;
	width: 100%;
	margin: 2% auto;
	padding: 0 2%;
}
.box .lineR {
	position: relative;
	text-align: right;
}
.box .lineR:after{
	content: '';
	position: absolute;
	left: 100%;
	bottom: 0;
	width: 0;
	transform: translateX(-100%);
	border-bottom: solid 1px #000;
	animation: lineR_anim 3s linear forwards;
}
@keyframes lineR_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 80%;
	}
}

Answer 1

グリッドレイアウトで書くのはどうですか？

.box{
  display: grid;
  grid: auto-flow / auto max-content auto;
}

.box .lineR {
  grid-column: 2 / span 2;
}

/* ... */

@keyframes lineR_anim {
  0%{
      width: 0%;
  }
  100%{
      width: 100%; // 変更
  }
}

Comments

[arisaan]

色々試してみましたがだめでした、、。
私が、グリットレイアウトに対して無知なところもあるので、ダメだったのかもしれませんが、、

[Lhankor_Mhy]

そうでしたか。
当方では上手くいきましたので、ここに書かれていない部分のコードの問題かもしれないですね。

[arisaan]

親切にしていただいたのに、
私が無知な故に申し訳ございません。

一応ですが、いただいたコードを追記すると、
タイトルの箇所は、左寄せになり、
下のコンテンツは右寄せになってしまいます、、。

[Lhankor_Mhy]

それについては、「タイトル」というのがどれのことか当方ではわかりませんし、ご提示のコードには「下のコンテンツ」がないので、お役に立てることはなさそうです。

---

サンプルを作りましたので置いておきます。

https://jsfiddle.net/Lhankor_Mhy/eog92k6s/

[arisaan]

ありがとうございます！！
サンプルのおかげで、なんとか実装することができました！

本当にありがとうございます！！