<p>Привет, это WAVIFUN</p>
<p class="text">Привет, это WAVIFUN</p>

p {
  font-family: Arial;
}
.text {
  font-family: Georgia;
  color:red;
  font-size:24px;
  border: 1px solid #000;
  padding:2% 0;
}
.text:hover {
  /*Добавим псевдокласс, который позволяет воздействовать на элементы при наведении.*/
  color:blue; /*изменили цвет*/
  cursor:pointer;
}
.text:before {
  content: "Наведи курсор";
  font-size:10px;
  position:relative;
  top:-20px;
  color:gray;
}
.text:after {
  content: "Всё для сайта и сайтостроения";
  font-size:10px;
  position:relative;
  top:-20px;
  color:gray;
  display:none;
}
.text:hover:after {
  display:block;
  position:relative;
  top:-20px;
  left:350px;
}