如何移除人力资源最高线？

Question

我在一个标题下面有一个HR标记；我注意到实际上有两行(一条在标题下面，另一条在它上面)，而我只想要在标题下面有一行。

我怎样才能去掉上线，只保留底部的下划线？这句话不仅没有必要，而且还会破坏网站的外观。

        <div class="about-us-text">

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

hr {
    
    margin-top: -12.5px;
    width: 14.3rem;
    height: 1.5%;
    color: black;
    background: black;
    border-radius: 2px;
}



.what-we-do h1{
    padding-top: 80px;
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 48px;
    /*-webkit-text-decoration: underline 12px;
    text-decoration: underline 12px;
     -webkit-text-underline-position: under;
    text-underline-position: under;*/
    color: #300600;
    padding-bottom: 25px;
}

.what-we-do h3{
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-top: 65px;
    color: #300600;
}

.what-we-do p {
    padding-top: 50px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    word-spacing: 0.75px;
    line-height: 50px;
    color: #300600;
}

Answer 1

为高级hr提供一个类upperhr，然后将@media查询用于首选屏幕大小，然后将display属性设置为none。

​

.what-we-do{
    display: grid;
  grid-template-columns: 1fr 1fr;

  column-gap: 94px;
}




hr {
    
    margin-top: -12.5px;
    width: 14.3rem;
    height: 1.5%;
    color: black;
    background: black;
    border-radius: 2px;
}



.what-we-do h1{
    padding-top: 80px;
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 48px;
    /*-webkit-text-decoration: underline 12px;
    text-decoration: underline 12px;
     -webkit-text-underline-position: under;
    text-underline-position: under;*/
    color: #300600;
    padding-bottom: 25px;
}

.what-we-do h3{
        font-family: interstate, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-top: 65px;
    color: #300600;
}

.what-we-do p {
    padding-top: 50px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    word-spacing: 0.75px;
    line-height: 50px;
    color: #300600;
}

@media only screen and (max-width: 600px){
    .upperhr{
        display: none;
    }
}

    <div class="what-we-do">

        <div class="about-us-text">

            <hr class="upperhr"> <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>
        </div>

​