Css 如何使下划线比标题长一些像素？

我目前正在尝试使用底部边框制作自定义下划线。但是，当前下划线一直延伸到我的块元素（整个页面）

我希望它只比我的标题长50像素（但是文本是灵活的，我不知道长度）

我可以这样做而不在

中添加另一个

标记吗？我不想在每个

中添加

元素只是为了更改我的设计

当前HTML为：

<h1>My title</h1>

是否可以将边框底部长度调整为我的文本长度？（例如，行为类似于边框的内联元素，但类似于换行符、填充和边距的块）

您可以使用

  h1 {
        font-size: 18px;
        color: #b62525;
        border-bottom: 2px solid #c68181;
        float: left;
        padding-right: 50px
     }

---

只需在css中再添加一个属性，如下所示：

h1 {
    display:inline;
    font-size: 18px;
    color: #b62525;
    border-bottom: 2px solid #c68181;
}

---

使用

display:inline block

有效，唯一的警告是

标记后面的内容必须是容器元素的全宽。这里的其他解决方案也假设了这一点。您也可以使用

display:inline

（旧浏览器支持），但

inline block

允许在需要时设置显式宽度

CSS

---

如果无法在其他规则中对内联或浮动方法进行补偿，则内联或浮动方法可能会出现问题。一种选择是使用

---

在块元素上设置display:table是一种好的样式吗？对于网页设计师来说，他们得出的结论是，这只是表格内容，而不是设计。那么display:table呢？请注意，

display:table

不受支持。

h1 {
    display:inline;
    font-size: 18px;
    color: #b62525;
    border-bottom: 2px solid #c68181;
}

h1
{
    display: inline-block;
    padding-right: 50px;
    border-bottom: 1px dotted #888;
}

h1
{
        display:table;
        border-bottom:1px solid black;
        padding-right:50px;
}