下划线标题 - 缩小线

我想创建类似这样的东西。
enter image description here 下划线标题 - 缩小线

我真的很累，因为我可以创建只有类似宽度的行像标题。我必须创建“更小”的行然后标题。试过用::做过，但它不适合我。有没有什么可能的方式来创建它。

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

来源

2015-02-11 chris880

为什么不问为什么你':: before'造型不工作（并张贴在这里的代码）？那或':: after'是可行的方法来做到这一点。 – ajp15243 2015-02-11 19:35:17

你给过你的'：之前'的内容：'';'规则？ – 2015-02-11 19:37:21

它看起来不像下划线。请描述你真正想要的，展示你最大的努力（问题本身的HTML和CSS），并指定它如何达不到你想要的。 – 2015-02-11 22:51:06

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>

来源

2015-02-11 19:36:17

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

您可以简单地把边框的特定词下，如果这是你正在试图做的事。

来源

2015-02-11 19:39:16 SRing

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; 
}

改变宽度你想多长时间要和“左”到线的位置，并增加了“边距”，使其远离文本。

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

来源

2015-02-11 19:41:25 Beck

'left'应该是15px，或者是'（100-width）/ 2' – abl 2015-02-11 20:37:46

下划线标题 - 缩小线

回答

相关问题