css - テキストの下に枠を付けるが、テキストを貫通させない

Question

雑誌のウェブデザインをしています。現在、下の写真にある 1996 年のタイトルのようなものを作ろうとしています。テキストの下に境界線があり、テキストの周りに白い背景があります。誰でも私がこれを行うのを助けることができますか? :)

Answer 1

もちろん、これを試してください：

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 の例