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

---

但这里的header是直接下划线的，没有高度间隙，而且下划线的宽度与header数据相同。我该怎么做？

Answer 1

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

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

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