html - 将居中元素扩展到一侧

Question

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

示例 1:
屏幕宽度为 1400px
标题宽度为1200px(左起:100px，左起:1300px)
边框宽度为1300px(左起:0，左起:1300px)

示例 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;
}