Bardzo szybki CSS - animacja podkreślenia

Tworzymy animację podkreślenia wykorzystując pseudoelement ::after, pseudoklasę :hover oraz właściwość transition-origin. Jest to łatwiejsze, niż nam się wydaje. Świetny wstęp do dalszych, bardziej zaawansowanych animacji.

Nasz HTML wygląda obecnie tak:

<p><span class="underline">Lorem ipsum</span>, dolor sit amet consectetur adipisicing elit. Temporibus sed in corrupti eius consectetur a molestiae quo praesentium, voluptate quam, aliquid labore magnam. Aliquid inventore cumque doloribus, quaerat dolorem qui!</p>

Mamy tu <span> z klasą underline. Od razu mówię – te efekty podkreślania „błyszczą” najbardziej przy guzikach, elementach nawigacji i tym podobne. Natomiast używaliśmy tego w poprzednim przykładzie, więc żeby nie utrudniać, podkreślimy sobie naszego spana.

Jest to też w jakiś sposób dające do myślenia – jak można to zmienić, aby wyglądało lepiej? Może odsunąć piksel/dwa w dół? Nad tym się jednak zastanowimy, gdy już wykonamy naszą animację.

Pierwsza rzecz – klasa underline:

.underline{
  display: inline-block;
  position: relative;
}

Teraz nasz after, na razie testowy:

.underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
}

Po wklejeniu tego powinniśmy zobaczyć podkreślenie na całej długości spana (width: 100%) o wysokości 2px (height: 2px), jego pozycję ustala position wraz z bottom i left, jego kolor background-color, zaś pusty content to element wymagany przy pracy z pseudoelementem ::after.

scaleX będziemy używali do wsuwania i wysuwania naszego podkreślenia. Na razie jest permanentnie wysunięte, dlatego je widzimy. Wsuńmy je:

.underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
}

Teraz, aby je wysunąć na hover musimy dodać taki kod:

.underline:hover::after {
   transform: scaleX(1);
 }

To jeszcze nie wszystko – musimy określić, skąd ma się wysuwać. To określa tranform-origin, które podobnie jak transition nadajemy na elemencie animowanym. Transform-origin ustawiamy na 'bottom left’ (albo right, jak chcemy od drugiej strony) i oczywiście ustalamy transition, aby mieć spowolnienie tej animacji tak, abyśmy mogli zaobserwować, że coś się dzieje i z tej lewej strony wysuwa się:

.underline::after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: #0087ca;
   transform-origin: bottom left;
   transition: transform 0.5s ease-out;
}

To już wszystko. Niby nic, ale zrozumienie tego prostego kodu i sposobu w jaki to „wysuwanie” działa otwiera nam drzwi do tworzenia naprawdę świetnych animacji i to bez dużego kombinowania. Wystarczy zrozumieć to, co właśnie zrobiliśmy.

Bardzo szybki CSS – animacja podkreślenia