<fancy-hyperlink href="https://example.com"> 
  Example.com
</fancy-hyperlink>

<template component="fancy-hyperlink">

<h1>
  <a class="link" inherit="href">
    <slot></slot>
  </a>
</h1>

<style>
a,
a:hover,
a:active,
a:visited {
  cursor: pointer;
  text-decoration: none;
}
.link {
  display: block;
  position: relative;
  margin-inline: 25px;
  font-size: 36px;
  color: darkblue;
}
.link:before {
  content: "";
  width: 0;
  height: 2px;
  background-color: #0fa3ff;
  position: absolute;
  top: 100%;
  left: 0;
  transition: width 0.3s ease-in-out;
}
.link:hover:before {
  width: 100%;
  z-index: -1;
}
</style>

</template>