html - 在css中自定义标签下划线

Question

我有一个 div 里面有一个标题，我想给标题加下划线，这样下划线覆盖了 div 的大约 80%，两边缩进 10%。另外，我希望下划线是标题下方的一些像素。我正在尝试这个

---

在html部分

<div id="divname">
     <h2>HEADER</h2>
</div>

---

---

在 CSS 部分

#divname h2 {
text-align: center;
font-family:arial,sans-serif;
text-decoration:underline;
}

---

但这里标题直接下划线，没有高度间隙，并且下划线的宽度与标题数据相同。我怎样才能做到这一点 ？

Answer 1

为 h2 元素设置边框，并将其宽度设置为 80%；margin:auto;用于居中

#divname h2{
    width:80%;
    margin:auto;
    display:block;
    border-bottom:1px solid gray;
}

这是一个jsfiddle：http: //jsfiddle.net/bxKZ3/

Answer 2

我不知道您是否可以使用 CSS 对下划线进行样式化，但还有另一种方法：

看看这个jSFiddle

HTML

<div id="divname">
    <h2>HEADER</h2>
    <div class="underline"></div>
</div>​

CSS

#divname h2 {
    text-align: center;
    font-family:arial,sans-serif;
    text-decoration:underline;
}
.underline{
    height:1px;
    background:#000;
    margin:0px 10px;
}

显然，这background:#000;会改变下划线的颜色。更改margin:0px 10px;将决定下划线两侧有多少空间（我相信这是您的要求之一）。

希望能帮助到你。

Answer 3

如果您使用 before/after 伪元素，则无需额外标记即可执行此操作：

http://jsfiddle.net/bxKZ3/1/

h2{
    text-align: center;
    background:#eee; 
}
h2:after{
    border-bottom:1px solid gray;
    display: block;
    margin: 1em 10% 0 10%;
    content: " ";
}

<h2>bonjour</h2>