时间戳

首页 > 解决方案 > 文本和下划线的 CSS 定位

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

问题描述

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

.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>

这就是我想要实现的目标

标签： htmlcsstextunderline

解决方案

尝试这样的事情，使用浮动和清除。根据需要调整 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>

推荐阅读