div内的CSS文本悬停下划线动画

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

您可以使用flex和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> 

您也可以使用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> 

如果您将<a>转到inline-block元素:after则两个示例都可以使用伪:after