为元素设置position:absolute后伪元素消失的原因及解决方法

需求是在p元素右侧添加一条水平线，最初通过给p::after设置border-bottom: 1px solid black实现效果，代码中红、蓝、绿色的outline为调试用样式，不属于最终设计部分。

初始可正常运行的代码 #

CSS部分：

div {
    position: relative;
    height: 100%;
    width: 100%;
    outline: 1px solid red;
}

p {
    transform: rotate(-90deg);
    display: flex;
    flex-direction: row;
    outline: 1px solid blue;
}
p::after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid black;
    margin: auto;
    margin-left: 10px;
    outline: 1px solid green;
}

HTML部分：

<div>
    <p>Text here!</p>
</div>

上述代码可以正常实现预期效果，但给p标签添加position: absolute调整位置后，水平线直接消失，异常代码如下：

出现问题的代码 #

CSS部分：

div {
    position: relative;
    height: 100%;
    width: 100%;
    outline: 1px solid red;
}

p {
   transform: rotate(-90deg);
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   outline: 1px solid blue;
}
p::after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid black;
    margin: auto;
    margin-left: 10px;
    outline: 1px solid green;
}

HTML部分和初始版本一致。

给p加position: absolute后水平线消失，核心原因是绝对定位元素默认会触发收缩适配（shrink-to-fit），宽度由内部内容决定：

• 没加绝对定位时，p是普通块级元素，默认宽度撑满父容器可用宽度，::after设置flex: 1 1可以分到剩余空间，足够显示出下边框线。
• 加了绝对定位后，p的宽度收缩到和内部文字宽度一致，没有多余剩余空间分配给::after伪元素，伪元素宽度为0，边框自然看不到。

给p元素显式设置宽度即可，宽度值根据你需要的水平线长度调整，修改后的p样式示例：

p {
   transform: rotate(-90deg);
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   /* 新增显式宽度，数值按需修改 */
   width: 200px;
   outline: 1px solid blue;
}

如果需要适配不同场景，也可以用calc()结合父容器尺寸计算宽度，只要保证p有大于文字本身的明确宽度，flex布局就能给::after伪元素分配到足够的渲染空间，水平线就会正常显示。

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