【初心者でもわかる】疑似要素でアイコンを付けたらテキストと微妙にズレる時の対処法

どうも7noteです。疑似要素でテキストの横にアイコンを付けると微妙に位置がズレてしまう場合の対処法について解説

このように、テキストの前にアイコンを付けると微妙にズレてしまう場合に、いい感じに上下中央にもっていく方法を解説します。

「ちょっとズレてしまった例」

ソース

index.html

<p>テキスト</p>

style.css

p::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(icon.png) no-repeat;
  margin-right: 10px;
  display: inline-block;
  transform: translateY(3px); /* 上下方向の位置を微調整する */
}

解説

上下方向でズレがおこるので、transform: translateY()を使い、上下の位置を調整します。
それだけですね、簡単です。

まとめ

position指定で位置を相対位置に指定する方法もありますが、単純にテキストの前にアイコンを設置するだけであれば、beforeを使った今回の方法が一番簡単かなと思います。
imgにして画像で設置する方法もありますが、個人的には疑似要素を使ったこの手法がオススメです。htmlがスッキリするので。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ