html - hr标签的自定义CSS

Question

我正在为 hr 标签声明 css，例如 ..

hr { 
    height: 2px !important;
    background-color: #A2B1B9;
    width: 9%;
    margin-left: 0px;
    margin-top:auto;
  }

但是 hr 标签的宽度并不总是需要与它所支持的文本相同。请引用屏幕截图。

在这种情况下，我可以使用像 .但是，由于内联 css 不符合 Web 开发的道德标准，我是否可以采用任何其他方法来使其动态化？

Answer 1

你好，现在尝试这种方式

创建一个类并使用这个 css 。这是您的最佳选择。

.customHr{
 padding-bottom:5px;
  border-bottom:solid 2px black;
  display:inline-block;
  vertical-align:top;
  color:blue;
}

<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>