关于使用:after伪元素定位实现字母L高亮的技术咨询

我在11:30-16:00学习了前端内容，编写了如下HTML和CSS代码：

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

代码生成的效果如下：

现咨询代码中以下属性是如何实现截图中淡紫色圆形高亮字母L的效果，并希望获得布局方面的帮助：

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

一、淡紫色圆形高亮字母L的实现原理 #

这段代码通过相对定位+绝对定位+transform偏移的组合，精准控制伪元素圆形的位置，从而实现字母L的高亮效果，具体拆解：

1. 参照容器设置：.title设置position: relative，为后续伪元素的绝对定位提供参照坐标系。
2. 初始定位锚点：top: 50%; left: 0; 把圆形伪元素的左上角定位到.title元素的垂直中点、水平最左侧位置。
3. 垂直居中校准：translateY(-50%)让圆形自身向上偏移自身高度的50%，这样圆形的垂直中点会和.title的垂直中点对齐，保证圆形在垂直方向完全居中。
4. 水平位置微调：translateX(-40%)让圆形向左偏移自身宽度的40%，使圆形的中心刚好对准字母L的位置，从视觉上形成高亮覆盖效果。
5. 层级保障：.title span设置position: relative; z-index: 2;，让文字层级高于圆形伪元素，避免文字被圆形遮挡。

二、布局优化建议 #

1. 响应式适配：当前固定的字体大小和圆形尺寸在小屏幕上易溢出，建议改用相对单位实现自适应：

   .title {
       font-size: clamp(32px, 5vw, 64px); /* 随视窗宽度自适应字体大小 */
       line-height: 1.2; /* 用相对行高替代固定值 */
   }
   .title:after {
       width: 1.7em;
       height: 1.7em; /* 用em关联字体大小，圆形随字体同步缩放 */
   }
   

2. 语义化优化：如果该标题是页面核心区块标题，建议将<h2>替换为<h1>，更符合HTML语义化标准，利于搜索引擎识别。
3. 兼容性处理：&:after是Sass/Scss的语法糖，若使用原生CSS，需改为.title:after，避免编译错误。
4. 居中细节优化：.title-wrapper用flex实现水平居中已足够，若需同时垂直居中，可给父容器添加min-height: 100vh和align-items: center，让标题在视窗中垂直水平双居中。

内容的提问来源于stack exchange，提问作者hpwebsearch