文本下的边框,但不是通过文本

时间:2012-09-08 16:37:33

标签: css

我正在为我的杂志制作网页设计。现在,我正试图制作类似1996年标题的内容,你可以在下面的图片中看到。边框下方有文字,但文字周围有白色背景。有人可以帮我这样做吗? :)

Click here to see image.

1 个答案:

答案 0 :(得分:3)

当然,试试这个:

<强> HTML

<div class="heading">
  <h1>Heading Title</h1>
</div>​

<强> CSS

.heading {
  text-align:center;
  border-bottom:2px solid #d5d5d5;
}
.heading h1 {
  display:inline-block;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:100;
  font-size:36px;
  position:relative;
  top:18px;
  background:#fff;
  padding:0 12px;
}
div,h1 {
    margin:0;
    padding:0;
}​

<强> jsFiddle example