用after定位

Question

我从11:30-16:00观看前端。结果

    <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;
    }

产生以下屏幕截图

属性如何

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

允许您用淡紫色圆圈突出显示字母 L，如屏幕截图所示？在图片中显示它。

我希望有人帮我布局。