.beautiful__link {
  /* position: relative; */
  display: block;

  padding: 4px 0;
  margin: 15px;

  transition: 0.5s;
  cursor: pointer;

  color: rgb(0, 0, 0);
  font-size: 22px;
  font-family: Lato, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.beautiful__link::after {
  position: absolute;

  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;

  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;

  background: rgb(5, 40, 54);
}

.beautiful__link:hover {
  color: rgb(5, 40, 54);
  text-decoration: none;
}

.beautiful__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}