h1自定义边框底部宽度而不是全宽

Question

这就是我需要的：

这就是我所拥有的：

h1 {
    border-bottom: 3px solid red;
}

并且边框是全角...

有一个很好的解决方案吗？

Answer 1

尝试使用display：inline-block

display: inline-block;

Example

Answer 2

以下是您的回答fiddle link

<div class="full-width">
<h1>Lorem</h1><br/>
<h1>Loerm ipsum h1</h1><br/>
<h1>Other Loerm ipsum h1</h1>
</div>

h1{
   border-bottom: 3px solid red;
   display: inline-block;
    text-align:center;

}
.full-width{
  text-align:center
}