リンクの前や後に自動で画像を表示する

リンクの前や後に小さな画像を自動で表示したい場合、 CSS の疑似要素である ::before または ::after を使用すると便利です。 ::before は対象の要素の前に疑似要素を作成し、 ::after は対象の要素の後に疑似要素を作成します。ここではスタイルシートを使ってリンクの前や後に自動で画像を表示する方法について解説します。

(2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新)

リンクの前に画像を表示する
リンクの後に画像を表示する

リンクの前に画像を表示する

最初にリンクの前に画像を表示する方法です。 a 要素を対象として疑似要素である ::before を使用します。

a::before{
  ...
}

これで a 要素の前に疑似要素が自動で追加されます。

追加した疑似要素の内容を設定するには content プロパティを使用します。例えば "💛" のような文字をリンクの前に表示するには次のように記述します。

a::before{
  content:"💛";
}

content プロパティの内容として画像を表示するには url() 関数を使用して次のように記述します。

a::before{
  content:url("img/picture.png");
}

例えば次のようなリンクを対象に、リンクの前に画像を設定してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<p>
今日は <a href="http://www.example.com/">鉛筆</a> と <a href="http://www.example.com/">消しゴム</a> を購入して帰る。
</p>
</body>
</html>

リンクの前に画像を表示する(1)

表示する画像として次のような小さな画像を用意しました。

スタイルシートを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>

<style type="text/css">
a::before{
content:url("img/circle.png");
}
</style>

</head>
<body>
<p>
今日は <a href="http://www.example.com/">鉛筆</a> と <a href="http://www.example.com/">消しゴム</a> を購入して帰る。
</p>
</body>
</html>

作成したページをブラウザで開くと次のように表示されます。

リンクの前に画像を表示する(3)

各リンクの前に画像が自動で表示されました。

リンクの後に画像を表示する

次にリンクの後に画像を表示する方法です。 a 要素を対象として疑似要素である ::after を使用します。

a::after{
  content:url("img/picture.png");
}

これで a 要素の後に疑似要素が自動で追加され、疑似要素の内容として指定した画像が表示されます。

それでは実際に試してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>

<style type="text/css">
a::after{
content:url("img/circle.png");
}
</style>

</head>
<body>
<p>
今日は <a href="http://www.example.com/">鉛筆</a> と <a href="http://www.example.com/">消しゴム</a> を購入して帰る。
</p>
</body>
</html>

作成したページをブラウザで開くと次のように表示されます。

リンクの後に画像を表示する(1)

各リンクの後に画像が自動で表示されました。

-- --

スタイルシートを使ってリンクの下線のスタイルを変更する方法について解説しました。

( Written by Tatsuo Ikura )