HTMLとCSSでリンクの前にアイコンを付ける

テキスト内に記述した<a>タグのデザイン性を高め、リンクであると視認しやすくするためにアイコンを付与する。WordPressでも有効な方法でカスタマイズする。

実装手順

style.cssに以下のコードを記述する


/**
 * リンクの前にアイコンを付ける
 */
 p.inside a {
  color: #006EB0;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 3px;
  padding-right: 3px;
}
p.inside a:hover {
  color: #006EB0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

p.inside a::before {
  content: "";
  background-image: url(../icon/arrow-right.svg);
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 3px;
}

アイコンを付与したい要素の親要素にクラス名insideを付与する

完成形がこちら

テキスト内のリンクにアイコンが付与される

ポイント

下線の位置を調節するために、1のコードの15行目に、

text-underline-offset: 0.2em;

を指定している。これにより文字と線の間に距離を空けている。


p.inside a:hover {
  color: #006EB0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Related Tags