CSSのアニメーションについて

text-dividerをホバー時に左の横線が右に消えていく、右の横線が左に消えていくようなアニメーションを実装したいです（アニメーション時間は１秒を想定）。
この場合、.text-divider：hover {}でどのようなコードを書けば良いでしょうか。

html
1<div class="text-divider">+ MORE</div>

CSS
1.text-divider {
2  display: flex;
3  align-items: center;
4	color:gray;
5	font-size:15px;
6}
7.text-divider::before,
8.text-divider::after {
9  content: '';
10  height: 1px;
11  background-color: gray;
12/* flex-grow: 1;  */
13	width:40%;
14		margin-left:20px;
15	margin-right:20px;
16		transition: 0.6s;
17}

K_3578

2021/04/30 05:47

途中で送信されたんですかね。質問は編集できますので、追記お願いします。ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。

teratail123

2021/04/30 06:15

ご指摘ありがとうございます。こちら修正いたしました。どうかよろしくお願いします。

K_3578

2021/04/30 06:23 編集

私がコメントで解説するより下記質問の回答を見た方が視覚的で分かりやすいと思うので参照してください。 https://teratail.com/questions/238564 因みに編集中に右側に表示されているプレビューが我々が見えている物です。プレビューを見ながら調整しましょう。

teratail123

2021/04/30 06:23

失礼しました。こちらでよろしかったでしょうか。ご確認願います。

行動規範の内容に同意します

回答1件

ベストアンサー

text-dividerをホバー時に左の横線が右に消えていく、右の横線が左に消えていくようなアニメーションを実装したいです（アニメーション時間は１秒を想定）。

テキストは中央配置のまま、左右の罫線が縮小して消えていくということかな。
だとしたら、 justify-content: center; で全体を中央配置にして、ホバー時の疑似要素の幅を 0 にすればいいでしょう。

css
1.text-divider {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  color:gray;
6  font-size:15px;
7}
8.text-divider::before,
9.text-divider::after {
10  content: '';
11  height: 1px;
12  background-color: gray;
13  /* flex-grow: 1;  */
14  width:40%;
15  margin-left:20px;
16  margin-right:20px;
17  transition: 0.6s;
18}
19.text-divider:hover::before,
20.text-divider:hover::after {
21  width: 0;
22}