文本后行的宽度，取决于文本的宽度

Question

我希望计算线条的宽度，具体取决于文字的宽度。这就是我现在所拥有的：

＆＃13;

＆＃13;

h1 {
    font-family: 'Roboto', sans-serif !important;
    color: #de361b !important;
    font-size: 25px;
    margin-bottom: 20px !important;
    font-weight: 700;
    text-align:center;
}

h1:after {
    content: ' ';
    display: block;
    height: 1px;
    background-color: #de361b;
    margin-top: 15px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<h1>Bierhalle Schepens heet u welkom!</h1>

<h1>Promoties van de maand</h1>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，线条的宽度并不取决于文字宽度。这就是我想要的：

有没有简单的方法来实现这一目标？

提前谢谢。

Answer 1

您可以在Text标签中添加填充，并将border-bottom属性设置为每个具有相同颜色的属性。如果您执行padding-left:5px;padding-right:5px;并将border-bottom设置为1px solid {your colour}，则应该看起来完全符合您的要求。

Answer 2

您可以改为使用text-decoration: underline：

＆＃13;

＆＃13;

h1 {
  font-family: 'Roboto', sans-serif !important;
  color: #de361b !important;
  font-size: 25px;
  margin-bottom: 20px !important;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;/*add this property*/
}

＆＃13;

<h1>Bierhalle Schepens heet u welkom!</h1>

<h1>Promoties van de maand</h1>

＆＃13;

＆＃13;

＆＃13;

备选方案，您可以添加span元素并使用border-bottom：

＆＃13;

＆＃13;

h1 {
  font-family: 'Roboto', sans-serif !important;
  color: #de361b !important;
  font-size: 25px;
  margin-bottom: 20px !important;
  font-weight: 700;
  text-align: center;
}
h1 span {
  border-bottom: 3px solid;
  padding: 0 20px 5px 20px;
  
}

＆＃13;

<h1><span>Bierhalle Schepens heet u welkom!</span></h1>


<h1><span>Promoties van de maand</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

引入span允许伪元素绝对定位并且比父元素宽。

h1 {
  font-family: 'Roboto', sans-serif !important;
  color: #de361b !important;
  font-size: 25px;
  margin-bottom: 20px !important;
  font-weight: 700;
  text-align: center;
}
h1 span {
  position: relative;
}
h1 span:after {
  content: ' ';
  position: absolute;
  height: 2px;
  background-color: #de361b;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 120%;
}

<h1><span>Bierhalle Schepens heet u welkom!</span></h1>

<h1><span>Promoties van de maand</span></h1>

Answer 4

对于h1，只需要添加border-bottom并添加填充，就像示例一样。在这种情况下，您不需要使用：

然后你可以用div分开并把h1放在“inline-block”和中心内容中，以获得结果所附的结果。

.item {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px
}
.item:nth-child(even) {
  background: #f0f0f0;
}
h1 {
  font-family: 'Roboto', sans-serif !important;
  color: #de361b;
  font-size: 25px;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  width: auto;
  margin: auto;
  padding: 15px 20px;
  border-bottom: solid 1px red;
}

<div class="item">
  <h1>Bierhalle Schepens heet u welkom!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, at, maiores. Corporis quam, odio vel molestias optio error accusamus. Aliquam.</p>
</div>
<div class="item">
  <h1>Promoties van de maand</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, at, maiores. Corporis quam, odio vel molestias optio error accusamus. Aliquam.</p>
</div>
<div class="item">
  <h1>test item!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, at, maiores. Corporis quam, odio vel molestias optio error accusamus. Aliquam.</p>
</div>

您可以编辑并查看演示here

问候！