position:absolute下h4::after伪元素滚动条问题排查与修复

错误原因 #

1. 布局冲突：<ul>同时使用了flex和grid布局类，两种布局规则冲突，导致子元素宽度计算异常，间接引发滚动条问题。
2. 不必要的溢出属性：h4设置了overflow-x: auto，该属性会在元素内容横向溢出时触发滚动条，而需求是显示固定宽度的下划线，完全不需要这个属性。

修复后的代码 #

JSX代码

<ul className="py-10 pl-3 mx-auto text-left steps-ul p-3 pt-50 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-3">
    <li className="col">
        <span className="step-number">1</span>
        <h4 className="text-white">这里填写标题内容</h4>
        <p>这里填写描述内容</p>
        <div className="right-arrow"> 
            <img src={RightArrow} alt="Right arrow"></img>
        </div>
    </li>
</ul>

• 移除了<ul>上的flex space-x-4类，保留grid布局即可实现多列排列。

CSS代码

.steps-ul {
    list-style: none;
    gap: 100px;
}

.steps-ul li {
    position: relative;
    background: url(../../asset/img/small-shape.svg) no-repeat;
}

.col {
    flex: 1 0 0%;
}

.step-number {
    color: #ffc629;
    font-size: 96px;
    font-weight: 700;
}

.steps-ul h4 {
    font-size: 20px;
    position: relative;
    margin-bottom: 40px;
    /* 移除引发滚动条的 overflow-x: auto 属性 */
}

.steps-ul h4::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -15px;
    background: #ffc629;
    height: 4px;
    width: 90px;
    border-radius: 10px;
} 

• 删除了h4的overflow-x: auto属性，伪元素的下划线会正常显示在标题下方，不会触发滚动条。

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