如何自定义标题中的一个字母

Question

我正在尝试解决一些 CSS 问题。我正在使用 TailwindCSS 进行样式设置，我想在信头的标题中添加一些自定义样式。 我附上了我想要的图片。到目前为止，我尝试添加我绝对定位的自定义边框，但如果仔细观察，它并不是像素完美的。而且在进行媒体查询时也很痛苦。 在我再花几个小时按照我迄今为止的方式进行造型之前，我想检查一下是否有人知道如何实现所需外观的更好方法？

非常感谢！

 <h1 className='font-bold lg:text-[110px] md:text-[80px] sm:text-[60px] text-[44px] lg:leading-[158.4px] md:leading-[114.4px] sm:leading-[74.4px] leading-[64.4px] uppercase text-white tracking-[10px] md:tracking-[20px] relative'>
       <span>HORI</span>
       <span className="inline-block transform scale-150 sm:scale-165 translate-x-2 -translate-y-1.1 md:-translate-y-1 md:translate-x-3">
             <span className="relative overflow-hidden">
             <span className="font-normal">Z</span>
      {/* border for letter Z - top*/}
             <span className="absolute right-[30px] sm:right-[40px] lg:right-[73px] w-full h-[3.1px] sm:h-[4.5px] lg:h-[8.2px] bg-white top-[12.7px] sm:top-[17.76px] lg:top-[32.2px]"></span>
     {/* border for letter Z - bottom*/}
             <span className="absolute left-[19px] sm:left-[28px] lg:left-[60px] w-full h-[3.7px] sm:h-[4.5px] lg:h-[8.2px] bg-white bottom-[10px] sm:bottom-[13.7px] lg:bottom-[24.5px]"></span>
       </span>
    </span>
    <span>ON</span>
  </h1>