Witam serdecznie.
Na samym starcie zaznaczam, że mój "staż treningowy" to zaledwie kilka dni.
Z pomocą hover/transform/transition oraz pseudo elementów zrobiłem taki oto efekt przy najechaniu na jakiś wybrany obiekt, w tym przypadku link:
https://gyazo.com/d7583f472cbafbd265b0e0283fe05d6a
Zastanawiałem się, czy dałoby radę w CSS taki sam efekt zrobić jednocześnie po drugiej stronie obiektu, tak aby tworzyły one po określonym czasie kwadrat. Zagadnienie zapewne jest banalne, ale mam nadzieję, że ktoś z Was będzie chętny mi to tutaj wyjaśnić.
.hoverlink {
text-decoration: none;
color: blue;
position:relative;
padding:3px;
}
.hoverlink::after
{
content:' ';
position:absolute;
right:0;
bottom:0;
width:2px;
height:100%;
background: linear-gradient(to top, red, purple);
transform:scaleY(0);
transform-origin:top;
transition:transform 200ms ease-out;
}
.hoverlink::before
{
content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:2px;
background:linear-gradient(to right, red, purple);
transform:scaleX(0);
transform-origin:right;
transition:transform 200ms ease-out;
}
.hoverlink:hover::after{
transform:scaleY(1);
transform-origin:bottom;
}
.hoverlink:hover::before{
transform:scaleX(1);
transform-origin:left;
}