CSS下划线小于标题的宽度？ [复制]答案

【问题标题】：CSS underline less than width of headline? [duplicate]CSS下划线小于标题的宽度？ [复制]
【发布时间】：2014-06-23 12:54:10
【问题描述】：

是否可以使用 CSS 使标题的下划线小于标题文本的宽度？我有以下 H1 标题样式：

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px #d2202f solid;
}

这会在我的 H1 标题下方产生一条细红色下划线。但是，是否有可能使下划线占标题文本的 50%？

【问题讨论】：

对不起，我搜索了几个短语，没有找到类似的。

标签： css underline

【解决方案1】：

您可以使用带有:before（或:after）的伪元素：

h1 {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

http://jsfiddle.net/9e27b/

【讨论】：

不能处理多行文本...
对于多行：内容：''；底部：0；左：30%；对：30%；高度：2px；背景：红色；显示：块；宽度：50%；位置：静态；左边距：25%；

【解决方案2】：

是和不是。

普通边框无法做到这一点，但您可以使用 CSS3 渐变边框来伪造它。

见：CSS3 Gradient Borders

【讨论】：

请稍微提高答案质量，也许有一些例子。我不能投票赞成删除，因为它还不够糟糕，但也不够好。