Как можно изменить направление увеличение?
Например есть такой код:
body {
margin: 0;
padding: 0;
}
header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
position: relative;
margin: 12px;
font-size: 2.5em;
}
.main::before {
content: "";
top: 100%;
position: absolute;
background: #333333;
opacity: 0%;
width: 0%;
height: 5px;
transition: 1s;
}
.main:hover::before {
content: "";
position: absolute;
width: 100%;
opacity: 100%;
}
.main::after {
content: "";
top: 0%;
position: absolute;
background: #333333;
height: 5px;
width: 1px;
transition: 1s;
}
.main:hover::after {
content: "";
position: absolute;
width: 100px;
}
<header>
<div class="main">Hi all</div>
<div class="main">Hi all</div>
<div class="main">Hi all</div>
<div class="main">Hi all</div>
</header>
Потом через hover я изменяю ширину, но она изменяется слева на право, а мне нужно наоборот. Как реализовать?