<!DOCTYPE HTML>
<html>
<title>In visibility hidden color animation on pseudo element</title>
<style>

div:before {
  visibility: visible;
  color: blue;
  content: "Color Animation";
}

div {
  color: black;
  visibility: hidden;
}

</style>
<div>color animation on visible psuedo element attached to invisible element</div>