H2带边框造型

Question

我想用这种风格创建h2

CSS：

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

代码：

<h2>WHAT WE DO</h2>

但这只会创建一个纯色的底线。我希望它在文本下面有黑色边框。

Answer 1

您可以使用跨度包装文本，并为其指定比标题更暗的边框。然后使用定位将文本向下压缩像素以对齐边框：

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

这里唯一的问题是您需要在'content'CSS属性中添加文本。

JSFiddle