CSSの「::after」疑似要素を使うと、指定した要素の後にテキストや画像を挿入することができます。この記事では、疑似要素の使い方をサンプルを交えてご紹介します。
[element][.class][:pseudoClass]::after {
/* properties */
}[element][#id]::after {
/* properties */
}::after擬似要素を用いて、blockquote要素の後に「』」という文字列を挿入する例を示す。
blockquote::after {
content: "』";
}<blockquote>
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
</blockquote>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
p.example::after {
/* properties */
}指定したクラスを持つ要素の後にテキストや画像を挿入する。
.example::after {
/* properties */
}li:first-child::after {
/* properties */
}
li:last-child::after {
/* properties */
}#example::after {
/* properties */
}CSSの疑似クラスと疑似要素を併用する場合、疑似クラスを先に指定する。
疑似クラス（:last-child）と疑似要素（::after）を併用する例を次に示す。
li:last-child::after {
/* properties */
}::after CSS擬似要素を用いて、マッチする要素の後にアイコン画像を挿入することができる。
CSSではマッチする要素の条件を指定する。
a.external::after {
content: url(/css/img/external-site.png);
margin-left: .5em;
}挿入する画像のURLを content プロパティに指定する。
<a href="https://tsuker.net" class="external">資産運用のすゝめ</a>上記のHTMLはウェブブラウザで次のように表示される。
CSSのcontentプロパティの値にHTMLコードを含めることはできないため、<br> タグを使って改行することはできない。
改行のエスケープ文字である \A と、white-space プロパティで自動改行しないようにすることによって、要素の末尾で改行することができる。
.br-after::after {
content: "\A";
white-space: pre;
}<span class="br-after">ここで</span>改行ここで改行
CSSの ::after 疑似要素を使って、三角を描写することができる。
.arrow {
display: inline-block;
position: relative;
padding-right: 12px;
text-decoration: none;
}
.arrow::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent blue;
top: 50%;
margin-top: -6px;
margin-left: .5em;
}<a href="/" class="arrow">SE学院</a>