.highlight-hover-effect {
  width: 100%;
  max-width: 100%;
}
.highlight-hover-effect > .highlight-hover-effect-child {
  padding: 0 calc(20px - 0.32em) 0 20px;
  text-align: justify;
}
.highlight-hover-effect p {
  display: inline;
  line-height: 20px;
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
  padding: 2px 0;
  transition: background-size .8s linear .5s, box-shadow .5s ease-out;
}
.highlight-hover-effect:hover p {
  background-size: 100% 100%;
  box-shadow: calc(20px - 0.32em) 0 0 #f5f5f5, -20px 0 0 #f5f5f58;
  transition: background-size .8s linear, box-shadow .5s ease-out .8s;
}