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>

自定义在css中标记标记

3 个答案: