hr标签的自定义css

Question

我宣布hr标签的css如..

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

但hr标记的宽度总是需要与支持的文本相同。请参考屏幕截图。

在这种情况下，我可以使用内联css来提供不同宽度和hr标签。但是，由于内联css不符合Web开发的道德标准，我可以采用其他任何方法使其变得动态吗？

Answer 1

HI现在尝试这种方式

创建一个类并习惯于此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>

Answer 2

Rohit Azad的答案是最好的，但如果是为了道德＆＃34;你宁愿使用hr的原因，你可以将它与文本一起包装以获得相同的长度。

＆＃13;

＆＃13;

div {
  display: inline-block;
}

＆＃13;

<div>
  <span>Text here</span>
  <hr>
</div>
<br>
<div>
  <span>T-t-t-t-t-text here</span>
  <hr>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用下划线，方法是将文本放在标记中，然后将自定义css放入其中。