<a alt='link to about page' href='/about'>
						<span data-content='About' aria-hidden='true'></span>About</a>
a{
  font-size: 4.5rem;
  color:black;
  text-decoration: none;
}
span{
	position:absolute;
	overflow: hidden;
	transform: translateX(-100%);
	transition: transform 275ms ease;
}
a:hover span{
	transform: translateX(0);
}
span::before { 
  display: inline-block;
  content: attr(data-content);
  color: rgba(251, 191, 36, 1);
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}
a:hover span::before {
  transform: translateX(0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.