CSS - zabawy z hover/transform/transition

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;
}

Zrób jeden pseudoelement o 4 piksele szerszy niż kontener, a drugi 4 cztery piksele wyższy.
Kontenerowi ustaw białe tło i tak ustaw z-index, żeby kontener był na wierzchu.

@Freja Draco:

Nie wiem czy dobrze Cię zrozumiałem, natomiast spróbowałem zrobić co zasugerowałeś i kod nie spełnia moich oczekiwań:

.hoverlink 
{
  text-decoration: none;
  color: blue;
  position:relative;
  padding:3px;
  z-index:0;
  background-color:white;
}

.hoverlink::after
{
    content:' ';
    position:absolute;
    right:0;
    bottom:0;
    width:calc(100% + 4px);
    height:100%;
    background: linear-gradient(to top, red, purple);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 400ms ease-out;
    z-index: -1;
}
.hoverlink::before
{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:calc(100% + 4px);
    background:linear-gradient(to right, red, purple);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform 400ms ease-out;
    z-index: -1;
}

.hoverlink:hover::after
{
    transform:scaleY(1);
    transform-origin:bottom;
    z-index: -1;
}
.hoverlink:hover::before
{
    transform:scaleX(1);
    transform-origin:left;
    z-index: -1;	 
}

smacznejkawusi napisał(a):

@Freja Draco:

Nie wiem czy dobrze Cię zrozumiałem, natomiast spróbowałem zrobić co zasugerowałeś i kod nie spełnia moich oczekiwań:

To przykre. Co prawda nie wytłumaczyłeś, w jaki sposób nie spełnia on twoich oczekiwań, ale i tak ci współczuję.

@smacznejkawusi: musiałbyś mieć 4 pseudoelementy aby osiągnąć identyczny efekt, spróbuj zaznajomić się z svg animation i w tym programie to wykonać.

Chłopa u góry nie słuchaj bo pewnie nawet nie zauważył, że każda linia ma transition

JanPancerzDrugi napisał(a):

@smacznejkawusi: musiałbyś mieć 4 pseudoelementy aby osiągnąć identyczny efekt, spróbuj zaznajomić się z svg animation i w tym programie to wykonać.

Chłopa u góry nie słuchaj bo pewnie nawet nie zauważył, że każda linia ma transition

Dziewczynko, że ty nie umiesz, to jeszcze nie znaczy, że czegoś nie da się zrobić.
Tu masz efekt jak w gifku (tyle, że z ramką 4 a nie z 2 stron) zrobiony na dwóch pseudoelementach:
http://drakonica.pl/dokumenty/css_magiczne_ramki.htm

@Freja Draco: Dzień dobry! Czy mógłbyś odesłać mnie do jakiejś strony, bądź zwięźle wyjaśnić, jak robić takie efekty? Super to wygląda, metodą intuicji mogę przekopiować i zmodyfikować kod, dostosowując go do mojej strony. Jednak czy jest jakaś baza wiedzy do tego typu efektów? Skąd TY się uczyłeś?

M.

Głównie używam tego:
https://www.w3schools.com/css/css3_transitions.asp

Tu jest często bardziej wyczerpująco, ale, jak dla mnie, jakoś trochę kulawo podane:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions