.box { background:black; } *,*:after,*::before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body { font-family:'Raleway',sans-serif; } nav a { position:relative; display:inline-block; margin:15px 25px; outline:none; text-decoration:none; text-transform:uppercase; letter-spacing:1px; font-weight:400; text-shadow:0 0 1px rgba(255,255,255,0.3); font-size:1.35em; padding:10px 0; color:#5cb85c; text-shadow:none; } nav a:hover,nav a:focus { outline:none; } .nav a::before { position:absolute; top:0; left:0; overflow:hidden; padding:10px 0; max-width:0; white-space:nowrap; border-bottom:2px solid white; color:white; content:attr(data-hover); -webkit-transition:max-width 0.5s; -moz-transition:max-width 0.5s; transition:max-width 0.5s; } .nav a:hover::before,.nav a:focus::before { max-width:100%; }
更新时间:2021-01-17 21:53:58