如何让div的::after伪元素显示在div红色边框外侧紧邻位置

问题核心 #

::after伪元素默认作为div的内部子节点渲染在内容流中，受div盒模型约束，因此设置的绿色边框会显示在红色边框的内部区域。

调整步骤 #

只需要两步修改即可让绿色边框紧挨红色边框外侧显示：

• 给div设置相对定位，作为伪元素的定位基准
• 给::after伪元素设置绝对定位，通过偏移属性把它放到红框外侧紧邻位置，同时调整宽度和红框外沿对齐

完整修正代码 #

<div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, eum.</p>
</div>

div {
    padding: 5em;
    border: solid 1px red;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        /* 左右各偏移-1px，抵消父元素1px的红色边框，让绿边和红框外沿对齐 */
        left: -1px;
        right: -1px;
        /* 向下偏移3px（等于绿边自身宽度），刚好紧贴红框下外侧 */
        bottom: -3px;
        border-bottom: 3px solid green;
    }
}

关键属性说明 #

• 不使用width: 100%的原因：绝对定位下width:100%是相对于父元素的padding盒计算宽度，会比父元素（含左右边框）的总宽度少2px，用左右偏移的方式适配宽度更精准，不需要手动计算宽度值
• 偏移量可以根据实际边框厚度调整：如果红色边框厚度、绿色边框厚度变化，只需要对应修改left/right的负偏移值（等于红边框厚度）、bottom的负偏移值（等于绿边框厚度）即可

修改前的运行效果参考：

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