【Labs】contentで挿入した画像の中心に元要素のテキストを配置する方法

Posted on 2017-02-24
Last updated on 2017-09-28

こんにちは（・∀・）

contentプロパティと疑似要素:beforeで挿入した画像の中心に、元要素のテキストを配置する方法について。

contentプロパティ

contentプロパティを使用して画像を配置する場合、そのままだと画像の真ん中に元になる要素のテキストは来てくれません。そんな時はどうしたら良いか⁉️

positionプロパティとネガティブマージンを使用してサクッと解決❗️

サンプル

サンプル1のHTML


<div class="demo">
<h1>見出し1</h1>
</div>

サンプル1のCSS


.demo h1 {
  background: #eee;
  font-size: 120%;
  margin: 1em 0 2em 0;
}
.demo h1:before {
  content: url(h1.png);
}

サンプル2のHTML


<div class="demo2">
<h1>見出し2</h1>
</div>
<div class="demo2">
<h1>見出し2-2<br>見出し2-2</h1>
</div>

サンプル2のCSS


.demo2 h1 {
  position: relative;
  background: #eee;
  font-size: 120%;
  margin: 1em 0 2em 0;
  padding: 6px 0 5px 20px;
}
.demo2 h1:before {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;/*画像の高さの半分の数値を指定*/
  content: url(h1.png);
}

サンプル3のHTML


<div class="demo3">
<h1>見出し3</h1>
</div>
<div class="demo2">
<h1>見出し3-2<br>見出し3-2</h1>
</div>

サンプル3のCSS


.demo3 h1 {
  position: relative;
  background: #eee;
  font-size: 120%;
  margin: 1em 0 2em 0;
  padding: 0 0 0 20px;
  height: 40px;/*画像の高さを指定*/
  line-height: 2.2;
}
.demo3 h1:before {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;/*画像の高さの半分の数値を指定*/
  content: url(h1.png);
}

サンプル4のHTML


<div class="demo4">
<h1>見出し4</h1>
</div>

サンプル4のCSS


.demo4 h1 {
  font-size: 120%;
  margin: 1em 0 2em 0;
  padding: 0 0 0 20px;
  line-height: 2.2;
  background: #eee url(h1.png) 0 0 repeat-y;
}

Result

サンプルデモ1・サンプルデモ2・サンプルデモ3・サンプルデモ4と解説

いかがでしたか、contentプロパティと疑似要素:beforeで画像を配置するとき、サンプル2やサンプル3のようにpositionプロパティとネガティブマージンを使えば簡単に元要素のテキストを画像の真ん中に配置することができます。しかしこのような背景画像の使い方をする場合、見出しのテキストが改行される可能性がある場合は、サンプル4のように普通にbackgroundプロパティを使う方が良いのかなと思います。

ちなみに疑似要素:beforeでURLを指定してリンクを作りたいところですが、疑似要素:beforeで配置したオブジェクトには実体がないとみなされてURLを指定することはできません。