我已经设计了我的 hr 标签，但它不起作用，我该怎么办？

Question

当我在 style.css 中输入 hr 标签的详细信息时，它没有显示结果！ HTML：

<hr class="hr1">

我想要一个 hr 标签，其中包含一些细节，例如颜色、悬停、文本对齐，我也想更改其宽度。

这是我用 CSS 写的：

.hr1{
    background-color: violet;
    width: 79%;
    text-align: center;

}
.hr1:hover {
    background-color: blue;
}

但是我在 html 页面中唯一能看到的是页面中心的 79% 灰色线！ 不是一条具有我指定的颜色和悬停的线！.

Answer 1

看起来

<hr>

默认情况下没有高度。您可以定义所需的

height

，并且可以将

border

全部删除。

.hr1 {
  background-color: violet;
  width: 79%;
  text-align: center;
  height: 2px;
  border: 0;
}

.hr1:hover {
  background-color: blue;
}

text
<hr class="hr1">
another