Css 下划线<；h1>；一分为二

我试图在

h1

-标题下加下划线，但由于某些原因，它总是占用父div的整个长度。我能够这样做的唯一方法是在css中添加

position:absolute

-属性

这就是设计：

这就是我得到的：

关键是要使蓝线仅与

h1

一样宽，并在父div下获得一条灰色边框线

HTML:

<div class="title">
    <h1>Contacteer ons</h1>
</div>

---

我计划在我的整个网站上使用HTML（每个

h1

的长度不同，在每个标题上添加固定宽度不是一个选项），所以我正在寻找一个健壮的解决方案。任何有意见的人？

您可以将

h1

更改为

显示：内联块

请参阅（为清晰起见，将
页边距底部添加到
标题中）的一个实例：

请参见。H1是块元素，因此它会增长以填充其父元素。您可以设置
display:inline
，但我也建议将它放在它自己的div（或任何其他带有
display:block
的元素）中，这样您就可以确保没有任何内容出现

<div><h1>Hello, world</h1></div>
Lorem ipsum

您还可以使用CSS样式
文本装饰

html:

你好，世界

css:

h1{
文字装饰：下划线；
}
是块元素，将跨越其父元素的宽度。这就是为什么你的下划线会出现在屏幕上——h1真的那么宽，即使其中的文本不是。
​h1 {
  border-bottom: 3px solid red;
  display: inline;
}​