「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法

2016年11月10日

コーディング作業をしていて、必ずと言っていいほど出てくる「>」などの矢印アイコンですが、画像で入れる場合に、レスポンシブでコーディングすると、スマホ画面で幅が変わる時に位置がズレてしまったりするので調整が意外とめんどうだったりしますよね。

しかし、cssの書き方次第で矢印アイコンの位置がズレずに表示ができるのです！
では早速、サンプルのソースコードと解説をしていきたいと思います。

html

css

デモ

解説

今回、aタグに指定しているcssはそんなに重要ではないので、擬似要素である:afterに指定してあるcssに注目して頂けたらと思います。
では、解説していきます。

display: inline-block;擬似要素の:afterでinline-blockをつけることで、「もっと見る」のテキストの後に改行せずにcontentを表示することができる

position:absolute; position:absolute;を入れることで、「もっと見る」のテキストの高さよりも高いアイコンでも切れずに表示できる、必要に応じて入れる。

width: ○px;
height: ○px;幅と高さを入れることで、背景画像の位置をbackground-positionで調整することができるようになる。

content: “”;擬似要素:before、:afterのみで使用するプロパティ。Contentがないと表示ができないので必ず入れるようにする。

上記の方法で位置を調整することで、PC、スマホの場合にもいい感じの位置にアイコンを表示できるかと思います。