Tailwind中before:width无法超父元素宽度，需实现完美圆形

为啥伪元素超不出250px？ #

你的<a>元素设了w-full（继承父div的250px宽度），而伪元素默认是行内元素，未脱离文档流，所以宽度被父元素的尺寸卡死。同时<a>没设置定位上下文，伪元素没法自由调整位置和尺寸。

修复后的代码（Tailwind伪类写法） #

<div class="absolute w-[250px] h-[50px] text-white">
  <a class="relative flex items-center w-full h-full rounded-full before:content-[''] before:absolute before:rounded-full before:w-[300px] before:h-[300px] before:bg-white before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2">    
    <span>test</span>
  </a>
</div>

关键改动说明 #

• 给<a>添加relative：作为伪元素的定位参照容器，让伪元素能基于它调整位置
• 伪元素加before:absolute：脱离文档流，彻底摆脱父元素的宽高限制，自由设置300px的尺寸
• 加入before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2：让300px的圆形完美居中在<a>元素上
• 必须加before:content-['']：Tailwind伪元素默认不会生成内容，显式设置空内容才能让伪元素正常显示

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