html Fíglnahover efekt（pomocíshadow-text）

Posted 2021-05-11

<a href="">ODKAZ</a>

@charset "UTF-8";
a {
  text-decoration: none;
  position: relative;
}
a:before {
  position: absolute;
  top: 100%;
  left: 50%;
  color: transparent;
  content: '€';
  text-shadow: 0 0 transparent;
  font-size: 0.7em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

a:hover:before {
  color: #373737;
  text-shadow: 20px 0 red, 10px 0 red, -10px 0 red, -20px 0 red;
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

a
{
  text-decoration: none;
  position: relative;
  &:before
  {
    position: absolute; top: 100%; left: 50%; color: rgba(0, 0, 0, 0); content: '€'; text-shadow: 0 0 rgba(0, 0, 0, 0); font-size: 0.7em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; 
  }
}

a:hover:before
{
  color: #373737; 
  text-shadow: 20px 0 red, 10px 0 red, -10px 0 red, -20px 0 red;
}

<a href="">ODKAZ</a>