<main class="wrapper">
    <section>
      <p class="text">P<span>i</span>ng</p>
    </section>
</main>

html {
    background-color: black;
    font-family     : "Times New Roman", Times, serif;
    font-size       : 1.5em;
    color           : #ff8a00;
}

.wrapper {
    height: 100vh;
    display        : flex;
    justify-content: space-evenly;
    align-items    : center;
    padding        : 0.5em 1em 0.5em 1em;
}

.text {
    margin     : 0;
    font-size: 100px;
    /*line-height: 0.55;*/
}

span {
    display: inline-block;
    background: linear-gradient(rgba(0, 0, 0, 0) 30%, #ff8a00 30%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    position: relative;
}

span::before {
  content: ".";
  -webkit-background-clip: none;
  -webkit-text-fill-color: gba(0, 0, 0, 0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ff8a00;
  position: absolute;
  top: -44%;
  left: 7%;
  z-index: 10;
  animation                : bounce 0.4s;
  animation-iteration-count: infinite;
  animation-direction      : alternate;
}

/*  Bouncing Animation */

@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -10px, 0);
    }
}

/**
 * The Trick to Animating the Dot on the Letter “i”
 *
 * https://css-tricks.com/the-trick-to-animating-the-dot-on-the-letter-i/#comment-1752474
 *
 */