html - 文本和下划线的 CSS 定位

Question

我正在尝试实现以下效果，但我在定位文本和使下划线转到屏幕末尾时遇到了一些问题。

.header {
  height: 550px;
  width: 100%;
  background-color: #1F2041;
  position: relative;
}
    
.header h1, .header h2{
  color: white;
  font-size: 52px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1.5px solid currentColor;
  line-height: 0.7;
  position: absolute;
  top: 210px;
}
    
.header p {
  margin-top: 40px;
  color: white;
}

<div class="header">
  <h2>About</h2>
  <h2>Nikola</h2>
  <p>Simple. Modern. Yours.</p>
</div>

This is what I'm trying to achieve

Answer 1

尝试这样的事情，使用 float 和 clear。根据需要调整 400px 的大小。也许这种方式 (float) 不是最好的方式，只使用边距可能是首选，但尽量避免使用 position: absolute 否则元素会很快重叠。

.header {
    height: 550px;
    width: 100%;
    background-color: #1F2041;
    text-align: right;
}
.header * {
    float: right;
    clear: right;
    width: 400px;
    text-align: left;
    color: white;
    margin: 0 0 20px;
}

.header h1, .header h2{
    color: white;
    font-size: 52px;
    text-transform: uppercase;
    border-bottom: 1.5px solid currentColor;
}

<div class="header">
    <h2>About</h2>
    <h2>Nikola</h2>
    <p>Simple. Modern. Yours.</p>
</div>