文字之后的线条宽度，取决于文字的宽度

我想要根据文字的宽度计算线条的宽度。这是我现在有：文字之后的线条宽度，取决于文字的宽度

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; 
 
}

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

 
<h1>Promoties van de maand</h1>

因此，大家可以看到，线的宽度不依赖于文本的宽度。这就是我想要的：

是否有一个简单的方法来实现这一目标？

预先感谢您。

来源

2015-10-15 Jacob

看起来像文本和线条具有相同的宽度，以我 – Filype

在屏幕截图的第二行是更小的（取决于文本H1的lenght） – Jacob

您可以将填充添加到文本标记，并将border-bottom属性设置为具有相同颜色。如果你这样做，比如说，padding-left:5px;padding-right:5px;并将border-bottom设置为1px solid {your colour}，它应该看起来完全如何。

来源

2015-10-15 10:16:35

这帮了我！ – Jacob

我总是使用它自己，我可以帮助开心！ :) –

您可以使用text-decoration: underline代替：

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*/ 
 
}

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

 
<h1>Promoties van de maand</h1>

替代，你可以添加一个span元素，并使用border-bottom：

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; 
 
    
 
}

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

 

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

来源

2015-10-15 10:16:15

感谢;但是这使用了文本的确切宽度。在屏幕截图中，您可以看到该线条大于文字的宽度。 – Jacob

@JacobVanAchter你可以通过添加'padding-left'和'padding-right'来调整它。 –

@JacobVanAchter检查更新的代码。 –

介绍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>

来源

2015-10-15 10:26:32

对于H1仅必须添加边框底部，并添加填充，如例子。在这种情况下，你不需要使用：after。

则可以处理的div分离并把H1像“内联块”和中心内容为获得等附接的图像的结果。

.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

商祺！

来源

2015-10-15 10:56:16

文字之后的线条宽度，取决于文字的宽度

回答

相关问题