CSS переход ширины ⇐ Html

[Anonymous]

Я пытаюсь создать переходы на ссылках на социальные сети на https://test-name.github.io/, но у меня возникают проблемы с тем, что он работает, как и ожидалось. На данный момент он перемещает начало стержня в установленную точку меньшей части, а затем плавно уменьшает ее. Я не совсем уверен, как подходить к этому, я в основном экспериментирую с CSS и переходами.

Код: Выделить всё

.social-links {
margin: 0 auto;
width: 50%;
}
hr {
width: 90%;
border-top: 2px solid #8c8b8b;
transition: width 0.5s ease;
}
@media (min-width: 768px) {
.social-links {
width: 30%;
}
}
.social-links span {
width: 100%;
text-align: center;
font-size: 1.8rem;
margin-top: 15px;
}
@media (min-width: 420px) {
.social-links span {
font-size: 2rem;
margin-top: 25px;
}
}
.fa-github:hover {
color: #64a4df;
}
.github-link:hover ~ .social-line {
width: 7.5%;
margin-left: 9%;
}
.fa-linkedin-square:hover {
color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
width: 7.5%;
margin-left: 34%;
}
.fa-twitter-square:hover {
color: #64a4df;
}
.twitter-link:hover ~ .social-line {
width: 7.5%;
margin-left: 59%;
}
.fa-facebook-square:hover {
color: #64a4df;
}
.facebook-link:hover ~ .social-line {
width: 7.5%;
margin-left: 84%;
}
.social-link {
margin-bottom: 20px;
padding-right: 0px;
padding-left: 0px;
height: 20px;
width: 20px;
background: red;
}< /code>





[url=https://github.com/test-name]

[/url]

[url=https://www.linkedin.com/in/test-name-43565497]

[/url]

[url=https://twitter.com/test-name]

[/url]

[url=https://www.facebook.com/test-name]

[/url]

Подробнее здесь: https://stackoverflow.com/questions/396 ... transition