Как сверстать такое лучше всего? Я сверстал эффект при наведении, но я не знаю как сделать эту линию и чтобы эффект входил туда.
body { background-color: #555; }
.header-nav-menu {
margin-top: 92px;
}
.header-nav-menu a {
text-decoration: none;
color: #fff;
font-family: "Sansation Light";
margin-left: 121px;
position: relative;
display: inline-block;
}
.header-nav-menu a::before {
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: #ff7979;
transition: width .5s ease-in-out, left .5s ease-in-out;
left: 50%;
bottom: 0;
}
.header-nav-menu a::after {
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: #ff7979;
transition: width .5s ease-in-out;
left: 50%;
bottom: 0;
}
.header-nav-menu a:hover::before {
width: 50%;
left: 0;
}
.header-nav-menu a:hover::after {
width: 150%;
}
.header-nav-menu li {
display: inline;
list-style-type: none;
}
<ul class="header-nav-menu">
<li><a href="#">Обо мне</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Контакты</a></li>
</ul>
body
поменял.