H2 带边框样式答案

【问题标题】：H2 with border stylingH2 带边框样式
【发布时间】：2014-01-16 19:34:18
【问题描述】：

我想用这种风格创建 h2

CSS：

h2 {
    color: #158FFA;
    border-bottom: 1px solid #CCC;
}

代码：

<h2>WHAT WE DO</h2>

但这只会用纯色创建底线。我希望它在文本下方带有深色边框。

【问题讨论】：

an <h2> 标签（以及所有的 hx 标签）默认是块级元素。因此边框将跨越元素的整个宽度，您需要添加display:inline-block。或者，如果您希望文本居中，则需要将文本包装在 <span> 中，就像建议的答案之一一样。

标签： css

【解决方案1】：

你可以用一个 span 包裹你的文本，并给它一个比标题更暗的边框。然后使用定位将文本向下凸出一个像素以对齐边框：

HTML

<h2><span>WHAT WE DO</span></h2>

CSS

h2 {
    color: #158FFA;
    border-bottom:1px solid #CCC;
    text-align:center;
}
span{
    position:relative;
    top:1px;
    display:inline-block;
    border-bottom:1px solid #AAA;
}

JSFiddle

或者如果你想使用伪元素：

h2:before{
    position:relative;
    top:1px;
    display:inline-block;
    border-bottom:1px solid #AAA;
    content:'What We Do';
}

这里唯一的问题是您需要在“内容”CSS 属性中添加文本。

JSFiddle

【讨论】：

我们不能只用 h2 div 做这个吗？
是的，我可以使用它，你能告诉我如何使用伪元素来做到这一点吗？
恐怕只有一个元素是你唯一的选择。
请不要使用 HTML <kbd> 元素来装饰您的链接。 meta.stackexchange.com/questions/181774/…