CSS下划线小于标题宽度

Question

是否有可能使用CSS使标题的下划线小于标题文本的宽度?我有一个H1标题的样式如下:

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

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

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/

Answer 2

是和不是。

普通边框不能做到这一点，但你可以用CSS3渐变边框来实现。

参见:CSS3渐变边框