将居中元素延伸到一侧

Question

我有一个标题居中的标题，但我希望底部边框一直延伸到屏幕的左侧，但保留标题的最大宽度。

示例1：
屏幕宽度为1400px
标头宽度为1200像素（从左侧开始：100像素，从左侧开始：1300像素）
边框宽度为1300像素（从左侧的0开始，从左侧的1300像素结束）

示例2：
屏幕宽度为100px
标头宽度为100px
边框宽度为100px

代码：

<header>
    ...
</header>

header {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid black;
}

Answer 1

边框不起作用，请尝试以下操作：

header {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

header::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: black;
    width: 100vw;
}