CSSのテキストがdiv内のアニメーションに下線を引く

Question

私のウェブページ上の単語の下線をアニメーション表示しようとしています。それは動作しますが、下線はdivの下にテキストが内部にあることを示しています。スニペットでdivが表示全体を満たすはずですが、スクロールして下線を表示する必要があります。テキストの下に表示するにはどうしたらいいですか？代わりにブラケットを使用しての

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

Answer 1

アンカーの行の高さは、親で変更されます。

あなたはフレックスとバックグラウンド・サイズを使用することができ、デフォルト

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; /* this value is inherited by the a */ 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
    line-height: initial; /* added */ 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

Answer 2

、私はそれの内側のdivを置きます。

<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"><div id="hoverDiv">Photos</div></div> 

CSSで、divの下の枠線が青色で表示されます。

申し訳ありませんすべてのコードを実行する時間がありませんが、それは最初の草案です...あなたに良いアイデアを与えることができれば幸いです！

Answer 3

にそれを復元します：

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
} 
 
div { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

あなたもまた、私たちを電子ディスプレイ：テーブル

html { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
html { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
body { 
 
    display: table-row; 
 
} 
 
div { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

あなたはそれはどちらかそのように動作しません<a>要素