为什么换行符上的样式不起作用？

Question

我在 frontendmentor.io 上进行挑战，目前我被困在一件事上：未应用换行符上的样式。

为了方便起见，我在 codepen 上写了一支笔：codepen link

Html代码：

    <main>
        <div class="card">
            <img class="card-img" src="./images/image-equilibrium.jpg" alt="blueish-red equilibrium cube">
            <div class="card-content">
                <h2 class="card-title">Equilibrium #3429</h2>
                <p>Our Equilibrium collection promotes balance and calm.</p>
                <div class="row card-icons">
                    <div class="eth row"><img class="eth-icon" alt="ethereum value to purchase item" src="./images/icon-ethereum.svg"><h3 class="icon-text">0.041eth</h3></div>
                    <div class="days-left row"><img class="clock-icon" alt="days-remaining icon" src="./images/icon-clock.svg"><h3 class="icon-text"> 3 days left</h3></div>
                </div>
                <hr class="line-break">
                <div class="creator row">
                    <img class="creator-pfp" src="./images/image-avatar.png" alt="Creator profile picture">
                    <p>Creation of <strong>Jules Wyvern</strong></p>
                </div>
            </div>
        </div>
    </main>

css :

/*   typography and styling   */
h2 {
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 1.75rem;
}

p {
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.5;
}

.eth .icon-text {
    color: var(--text-color-eth);
    font-family: var(--body-font);
    text-transform: uppercase;
    font-weight: 600;
}

.days-left .icon-text {
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: 300;
}

hr.line-break {
    border-top: 1px solid #aaaaea);
}

Answer 1

我认为hr 不接受任何风格。

您可以使用一个空的 <div class='line-break'></div> 相反

像这样

.line-break{
 width:100vw;
 hight:1px;
 border-top: 1px solid #aaaaea;
}

Answer 2

您可以添加换行样式。我注意到你在末尾添加了“）”。你必须删除它。

check this image

Answer 3

这是您的代码：

hr.line-break {
    border-top: 1px solid #aaaaea;
}

删除)

为什么换行符上的样式不起作用？

why isn't the styling on the line break working?

html

css

line-breaks