タイトルにセンターラインをCSSで表示する方法

2015年8月18日2023年9月28日

よくみかけるこんな感じのタイトルにセンターラインが表示されるデザイン。
CSSで制作するとこんな感じでできましたのでご参考ください。

What’s New

What’s New新着情報

html

What’s New

<div class="center-line"><span>What's New</span></div>

.center-line クラスの中で「What’s New」をspanで囲みます。

What’s New新着情報

<div class="center-line"><span>What's New<small>新着情報</small></span></div>

さらに下段「新着情報」のような文字を表示させたい場合smallで「新着情報」を囲みます。

CSS

.center-line {
  position: relative;
  text-align: center;
  margin:1em 0;
  border:none;
  font-weight:normal;
  color:#333;
}
.center-line:before {
  border-top: 1px solid;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}
.center-line span {
  background-color: #fff;
  display: inline-block;
  padding: 0 1em;
  position: relative;
  font-family:"Times New Roman", Times, serif;
  font-size:24px;
}
.center-line span small{
  color: #999;
  font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  
  font-size:11px;
  display:block;
}

フォントの部分は背景を白にしているだけなので、背景に色が入ってる場合はspanのbackground-colorを変更してください。