CSS下划线小于标题宽度? [英] CSS underline less than width of headline?

问题描述

CSS是否可以使标题下划线的宽度小于标题文本的宽度?对于H1标题，我具有以下样式:

Is it possible with CSS to make the underline of a headline less wide than the headline text? I have the following style for an H1 headline:

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

这会在我的H1标题下方产生一个细红色的下划线.但是，是否可以使下划线成为标题中文本的50％?

This produces a thin red underline below my H1 headlines. However, is it possible to make it so that the underline is 50% of the text in the headline?

推荐答案

您可以在:before(或:after)中使用伪元素:

You can use a pseudo element with :before (or :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/

这篇关于CSS下划线小于标题宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！