親要素hover時に子要素を動かすようにしたい

Question

フッター部分にhover時に要素の下のアンダーラインが動くようなアニメーションをcssで作成しています。
アニメーションまではできたのですが、子要素の下の部分に線の位置を変更したいです。

Tel
000-000-0000
受付時間
定休日
ーーーーーーー

となっているのを

Tel
ーーーーーーー
000-0000-0000
受付時間
定休日

としたいのですが、指定がなかなかうまくいきません。
またhoverの範囲はTel部分だけではなくclass="telephone"の要素をhover時に変更するようにしたいです。
どこを修正すれば、class="telephone"をhover時に"Tel"下のアンダーラインが動くかご教授いただけないでしょうか。

ソースコード

<div class="common-footer">
  <div class="inquiry">
    <div class="contact">お問い合わせはこちら</div>
    <div class="information">
      <div class="mail"><p class="inquiry-title">Contact<br/>us</p></div>
      <div class="telephone"><p class="inquiry-title">Tel</p><p class="tel-info">000-000-0000</p><p class="recept-time">受付時間:平日 10:00～17:00<br/>定休日：土曜・日曜・祝日・年末年始</p></div>
    </div> 
  </div>
</div>

.common-footer{
  background: #027;
  color: #fff;
  width: 100%;
  padding:7%
}
.inquiry{
  margin-right:10%;
  width: 600px;
  margin-left: auto;
}
.information{
  display:flex;
}
    .contact{
        padding-bottom:60px;
        margin-right: 20%;
        text-align:center;
    }
    .mail{
        margin-right:30px;
        position: relative;
    }
    .telephone{
        position: relative;
        margin-left:30px;
    }
    .inquiry-title{
        font-size: 72px;
        line-height: 66px;
        margin-bottom:5px;
    }
    .tel-info{
        font-size:16px;
    }
    .recept-time{
        font-size:10px;
    }

/* アンダーライン */
.mail::before, .telephone::before{
  display:block;
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: all .4s;
}
.mail:hover::before, .telephone:hover::before {
  transform:translate3d(119%,0,0);
}
.mail:hover::after, .telephone:hover::after {
  transform:translate3d(0,0,0)
}

    
@media screen and (min-width:768px) {
.mail, .telephone {
  overflow:hidden;
}
.mail::before, .telephone::before{
  width:100%;
  bottom:0
 }
.mail::after, .telephone::after{
 display:block;
 content:'';
 width:100%;
 height:1px;
 bottom:-7px;
 left:0;
 position:absolute;
 background-color:#fff;
 transition:all .4s;
 transition-delay:.1s;
 transform:translate3d(-100%,0,0)
}
}
@media screen and (max-width:768px) {
 .mail::after, .telephone::after {
  display:none
 }
}
@media screen and (min-width:768px) {
 .mail::after, .telephone::after{
  width:100%;
  bottom:0
 }
}

どこが修正に必要かわからないため、一旦ソースすべて掲載させていただきます。。。

Answer 1

---

Tel
ーーーーーーー
000-0000-0000
受付時間
定休日

---

ラインの位置を ▲ にしたいのであれば

.mail::before, .telephone::before{
  display:block;
  content: '';
  position: absolute;
/* これを削除  bottom: -1px; */
  top: 1.4em; /* 上からの距離を追加 */
  left: 0;
/* 以下略 */
}

top のサイズは
余白、font、line-heightなどによりますので
調整して頂けば良いかと思います^^

Comments

[gumin]

"inquiry-title"領域に疑似属性等を使用してなんとかしなければいけないと思っていたのですが、非常にシンプルでかつ動作も問題なく動きましたので、ベストアンサーにさせていただきます！

Answer 2

• .telephone内の.inquiry-titleを<div class="wrap"></div>で囲む
• スタイルシート修正・追加

 /*追加*/
.telephone .wrap{
position:relative;
}

 /*修正*/
.mail::before, .telephone .inquiry-title::before{

Comments

[yambejp]

あとはhoverにあわせたcssも適宜調整

Answer 3

こんにちは。
こんな感じですか。

サンプル

    .inquiry-title{
        position: relative; /* 追加 */
        font-size: 72px;
        line-height: 66px;
        margin-bottom:5px;
    }

.mail::before, .telephone .inquiry-title::before{ /* 変更 */

.mail:hover::before, .telephone:hover .inquiry-title::before { /* 変更 */

.mail:hover::after, .telephone:hover .inquiry-title::after { /* 変更 */

.mail::before, .telephone .inquiry-title::before{ /* 変更 */

.mail::after, .telephone .inquiry-title::after{ /* 変更 */

 .mail::after, .telephone .inquiry-title::after { /* 変更 */

 .mail::after, .telephone .inquiry-title::after{ /* 変更 */