- 記事公開日
メインタイトルの下に左右ボーダーで挟んだサブタイトルの見出しデザインをCSSだけで表現する
メインタイトルは太字の英語で、その下に左右のボーダーで挟んだ小さい日本語の文字をサブタイトルで表現する見出しをデザインしたいの。
できればCSSだけで表現したいんだけど、どうしたらよい？
了解しました！
display:flexを使い、span::before、span、span::afterを横に並べ、疑似要素（before／after）でボーダーを描きます。
これなら背景が透過されているので、背景に画像を置いても、色がついていても使えるので、汎用性が高いはずです。
こちらをどうぞ↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>メインタイトルの下に左右ボーダーで挟んだサブタイトルの見出し用CSS</title>
<style>
html,
body {
width:100vw;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
margin:0;
padding:0;
}
h2 {
font-size:1rem;
color:#000;
line-height:1em;
text-align:center;
vertical-align:bottom;
margin:0;
padding:0;
}
.border_title {
display:inline-block;
}
.border_title b {
display:block;
font-size:2.8rem;
color:#000;
line-height:1.4em;
margin:0;
padding:0;
}
.border_title span {
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
font-size:0.8rem;
font-weight:normal;
color:#000;
line-height:1em;
}
.border_title span::before,
.border_title span::after {
height:1px;
content:"";
display:inline-block;
opacity:0.4;
border-top:1px solid #000;
flex-grow:1;
}
.border_title span::before {
margin-right:0.5rem;
}
.border_title span::after {
margin-left:0.5rem;
}
</style>
</head>
<body>
<h2 class="border_title">
<b>NEWS</b>
<span>お知らせ</span>
</h2>
</body>
</html>
