如何移除标题上方的HR线条，仅保留下方下划线？

方法1：直接修改HTML结构（最简单） #

直接删掉<h1>上方的<hr>标签即可，修改后的HTML结构如下：

<div class="about-us-text">
    <h1>We Create </h1> <hr>
    <h3>PLACES THAT INFLUENCE</h3>
    <p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
    <h3>PLACES THAT INSPIRE</h3>
    <p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
    <h3>PlACES THAT INFORM</h3>
    <p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
</div>

修改后页面只会显示标题下方的线条，完全满足需求。

方法2：用CSS隐藏上方的HR（无需改动HTML） #

如果不想调整HTML结构，可通过CSS选择器定位到<h1>上方的第一个<hr>并隐藏：

/* 隐藏.about-us-text容器内的第一个hr */
.about-us-text hr:first-of-type {
    display: none;
}

将这段代码添加到你的CSS样式中，就能只保留标题下方的<hr>。

方法3：用H1伪元素替代HR（更符合语义化） #

其实没必要用<hr>标签实现标题下划线，直接给<h1>添加伪元素做线条，结构更简洁，样式也更易控制：

1. 先删除HTML里的两个<hr>标签：

<div class="about-us-text">
    <h1>We Create </h1>
    <h3>PLACES THAT INFLUENCE</h3>
    <!-- 其余内容保持不变 -->
</div>

2. 修改<h1>的CSS样式，添加伪元素：

.what-we-do h1{
    padding-top: 80px;
    font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: #300600;
    padding-bottom: 25px;
    position: relative; /* 为伪元素定位提供基准 */
}

/* 用伪元素实现底部线条 */
.what-we-do h1:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0; /* 若要让线条居中，可改为left: 50%; transform: translateX(-50%); */
    width: 14.3rem;
    height: 1.5%;
    background: black;
    border-radius: 2px;
}

这种方法更符合语义化设计原则，也避免了多余的标签。

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