<html>
  <body>
    <h1>Hello!</h1>
  </body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Lora:ital@0;1&family=Poppins:wght@300;400&family=Unbounded&display=swap');

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
}

h1::after {
  content: "";
  width: 0px;
  transition: 0.4s;
  display: block;
}

h1:hover::after {
  width: 100%;
  border: solid 0.5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.