CSS text hover underline animation inside of div

Question

I'm trying to animate an underline for a word on my webpage. It works, but the underline shows under the div that the text is inside. You can see on the snippet that the div is supposed to fill the whole display, but now you have to scroll down to see the underline. How can I make it show right under the text?

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

The line height of the anchors is modified in the parent.

Restore it to the default

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

Instead of using an a bracket, I would put a div inside it.

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

and then in the CSS, you just show the bottom border of the div in blue on the hover.

Sorry I don't have time to do all the code, but it's a first draft... hope it can give you a good idea !

Answer 3

you may use flex and background-size:

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>

you may also use display:table

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>

both example can use the pseudo :after if you turn <a> to inline-block element