Positioning with after

I watched from 11:30-16:00 Frontend. As a result

    <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>

    .title {
        font-family: 'Oxanium',
        font-weight: 700;
        font-size: 64px;
        line-height: 130px;
        color: #F5FBF2;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%) translateX(-40%);
          background: #8613A5;
          width: 110px;
          height: 110px;
          border-radius: 50%;           
        }

        span {
          text-align: center;
          position: relative;
          z-index: 2;   
        }
    }

    .title-wrapper {
        display: flex;
        justify-content: center;
    }

produces the following screenshot

Live Auctions

How properties

      top: 50%;
      left: 0;
      transform: translateY(-50%) translateX(-40%);

allow you to highlight the letter L with a lilac circle, as in the screenshot? Show it in a picture.

I want that someone help me with layout.

• Initially, the top left of the circle is the same as the top left of the text block (block is highlighted yellow). Note, that line-height: 130px makes the block height much greater, than text height.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    /* top: 50%; */
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

.title-wrapper {
  display: flex;
  justify-content: center;
}

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

• After top: 50% (50% is relative to the text block height) the circle is positioned vertically, so it's upper point is in the middle of the text block.

.title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

.title-wrapper {
  display: flex;
  justify-content: center;
}

<div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>

• After transform: translateY(-50%) (50% is relative to circle height) the circle is shifted vertically, so that it's center is located at previous upper point location
• translateX(-40%) shifts the circle horizontally, so that it's moved to the left 40% of circle width.