@media (prefers-reduced-motion: no-preference) {
	p {
		color: #FFF;
		background: no-repeat -5% / 10% 95% linear-gradient(91deg, #FF000020 0%, #FF0000E0 50%, #FF000020 100%), black;
		animation: 2s linear 0s infinite alternate wonky_cylon;
	}
	p::after {
		content: " Hi - this is a animation";
	}
}

@keyframes wonky_cylon {
	from {
		background-position: -10% -100%;
	}
	to {
		background-position: 110% 200%;
	}
}

body   { 
	background-color: DarkBlue ; 
	background-image: url("Informatik-Blickfang-1024x341.jpg");
	background-repeat: no-repeat;
	background-position: 90% top;
	color: darkblue;
	height: 100vh;
}

<p>Hover <a href="https://pc-support.wenpas.ch/index.php" data-replace="https://pc-support.wenpas.ch/index.php"><span>WENPAS Informatik</span></a></p>

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}