大見出しの日本語の上にチマッッとした英語の副題がついてるアレ。コーポレートサイトなどでよく使われてますね。なるほど、と思った方法を見かけたので備忘録です。未来の自分のために。
まずはHTML。
<h1 class="title" data-en-title="HOGE HOGE">日本語の見出し</h1>そしてCSS。
.title {
font-size: 36px;
text-align: center;
position: relative;
}
.title::after {
font-size: 16px;
letter-spacing: .1em;
color: #707070;
display: block;
line-height: 1;
left: 0;
right: 0;
top: -2em;
position: absolute;
content: attr(data-en-title);
}HTMLでカスタムデータ（data-en-title=”~~”)として値を入れておき疑似要素でそれを表示させる、というやり方。
確かにあのチマッとした副題、デザイン的に入れてることの方が圧倒的に多い。意味のないHTMLを書くとGoogleがイラッとすると聞きました。今度機会があったらこの方法を真似しよう。
-
-
-
