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 Gradient Borders

CSS强调低于标题宽度？

2 个答案: