文字之後的線條寬度，取決於文字的寬度

我想要根據文字的寬度計算線條的寬度。這是我現在有：文字之後的線條寬度，取決於文字的寬度

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

文字之後的線條寬度，取決於文字的寬度

回答

相關問題