在 html5 中替代水平规则标记 \`<hr>\`

Question

我目前正在为日历（在 html5 中）处理一些 html，并且我正在尝试添加一条彩色水平线。我一直在使用水平线标记 <hr> 但我正在努力让大部分属性发挥作用。

这就是我要的：

 <hr color="purple" align="left" width="120%" size="6">

我读到一些属性在 html5 中不起作用……唯一起作用的是 width 标签。其他人都没有做任何事情！

我怎样才能让它工作？有没有更好的方法来解决这个问题？

原文由 Ruth Young 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 CSS 规则

 hr.someClass {
  background-color: purple;
  width: 120%;
  height: 12px;
  border-top: 1px solid black
}

 <hr class="someClass">

原文由 Satpal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以添加一个带有 border-top 的 div，如下所示：

 <div style="border-top: 6px solid purple"></div>

使用外部样式（总是更好）：

 .horizontal-rule {
  border-top: 6px solid purple;
}

 <div class="horizontal-rule"></div>

原文由 CalvT 发布，翻译遵循 CC BY-SA 3.0 许可协议