CSS下划线是否可以比标题宽度小？

Question

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

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

这将在我的H1标题下方产生一条细红色下划线。然而，是否有可能使下划线成为标题文本的50％？

- therealbiglou

---

抱歉，我搜索了几个短语，但没有找到类似的内容。 - therealbiglou

Answer 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/

- James Montagne

---

无法处理多行文本... - Meek

对于多行文本： 内容：''; 底部：0; 左侧：30％; 右侧：30％; 高度：2像素; 背景：红色; 显示：块; 宽度：50％; 位置：静态; 左边距：25％; - TheKitMurkit

Answer 2

是和不是。

普通的边框不能做到这一点，但您可以使用CSS3渐变边框来模拟它。

请参见：CSS3渐变边框

- Diodeus - James MacFarlane

---

请稍微提高答案的质量，可以举些例子。我不能投票删除，因为它并不糟糕，但也不够好。 - Alexey Malev