下划线标题 - 较窄的线

时间:2015-02-11 19:31:47

标签: css line underline heading

我想创造这样的东西。
enter image description here

我真的很累,因为我只能创建类似于标题宽度的线条。我必须创造更小的"线然后前进。尝试用::之前完成它,但它对我不起作用。有没有可能的方法来创建它。

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

3 个答案:

答案 0 :(得分:3)

h1 {
  display: inline-block;
  position: relative;
}
h1::after {
  content: '';
  position: absolute;
  left: 10%;
  display: inline-block;
  height: 1em;
  width: 70%;
  border-bottom: 1px solid;
  margin-top: 5px;
}

将宽度更改为您希望的长度,并将“左”更改为该行所在的位置,并增加“margin-top”以使其更远离文本。

http://jsfiddle.net/53zxor2k/1/

答案 1 :(得分:0)

h1 { 
    position: relative;
    text-align: center
}

h1:before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 130px;
    height: 2px;
    background: red;
    transform:translateX(-65px) /*    width/2    */
}
    
    
<h1>some heading here</h1>

答案 2 :(得分:0)

<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>

如果您正在尝试这样做,您可以简单地在特定单词下面添加边框。