
この記事では、擬似要素afterを解説していきますが…
細かなことが結構気になるので、割と脱線します。
その点はご容赦をば。
ちなみにafter
でできることは、beforeでも使えるので参考にしてみてください。
afterの指定方法
まずはafter
を指定してみましょう。
<p>ほぼほぼ</p>
p::after {
content: 'old';
}
ほぼほぼ
「ほぼほぼ」のすぐあとに「old」が入りました。
検証画面で見ても、「ほぼほぼ」のあとに::after
となってますね。

まあ、だから何だってことはないですが…
話を戻します。
「p」と「::」、「::」と「after」の間にはスペースを入れないようにしましょう。
ここだけは半角スペースでも、指定が効かなくなります。
指定が効かなくなる↓
- p ::
- :: after
次はcontent
を見てみましょう。
content: 'old'
となってます。
‘ ‘は、” “でもオッケー。
まあ、ほとんどないと思いますが、
<p>ほぼほぼ</p>
p::after {
content: '"old"';
}
ほぼほぼ
のようなやり方もありみたいです。
Chromeでしか確認してないので、Safariとかでやるとバグるかもしれません。
afterはインライン要素
after
はインライン要素です。
これは、display
の初期値がinline
だから。
※初期値…要素にプロパティを指定していない時、はじめから与えられている値。


幅や高さを指定したい時は、block
またはinline-block
への変換が必要になるので、頭に入れておきましょう。
【参考記事】
初期値の使い所を理解する
ブロック要素とインライン要素の違い|できることできないこと
afterにpositionを指定してみる
今度はafter
にposition
を指定してみましょう。
目指す形はこちら↓

<p>ほぼほぼ</p>
p {
position: relative;
text-align: center;
}
p::after {
content: '▽';
position: absolute;
}
ほぼほぼ
※文字を中央に持ってきました。
<p>へのposition: relative
の指定忘れが結構多いので、気をつけましょう。
【参考記事】positionの使い方|要素を見失わないために
ちなみに、after
の親要素は<p>と解釈してます。
僕は。
さっきの図を見てもらうと、::after
が<p>の入れ子になってるので。

で、上ではtop
やleft
は指定してません。
この場合、▽はこれまでと同様に「ほぼほぼ」のうしろに位置します。
で、まずはbottom
から指定。
<p>ほぼほぼ</p>
p {
position: relative;
text-align: center;
}
p::after {
content: '▽';
position: absolute;
bottom: -16px;
}
ほぼほぼ
文字の大きさ(16px)ぶん下げました。
ですから、マイナス値を使っています、

次は画面の中央に▽を移動させます。
<p>ほぼほぼ</p>
p {
position: relative;
text-align: center;
}
p::after {
content: '▽';
position: absolute;
bottom: -16px;
right: 50%;
}
ほぼほぼ
ただ、これだとやや左にズレます。

ど真ん中にするには、▽の幅半分を右に移動させる指定が必要ですね。
<p>ほぼほぼ</p>
p {
position: relative;
text-align: center;
}
p::after {
content: '▽';
position: absolute;
bottom: -16px;
right: 50%;
transform: translateX(50%);
}
ほぼほぼ
ど真ん中に位置させることができました。
transform: translateX(50%)
で、▽の幅半分。
▽は文字の大きさが16pxなので、8pxを右へ移動することになります。

【参考記事】画像の上に文字をのせつつ、中央に置く
邪道な移動方法
もう少し雑にやる方法として、transform
だけ使うってのもあります。
<p>ほぼほぼ</p>
p {
text-align: center;
}
p::after {
content: '▽';
display: inline-block;
transform: translate(-40px,16px);
}
ほぼほぼ
transform
というのは要素、つまりここでは擬似要素が置かれている場所から、どのくらい移動させるかという時に指定します。
▽があるのは「ほぼほぼ」のあとですね。
-40pxなので、左に40px。
そして、上から下に移動させるので16pxとします。
まあ、かなり邪道です。
仕事の話で恐縮ですが、ワードプレスとかでサイトを作ってると、何というか指定の制限みたいなものが出てくるんです。
とてもイメージしづらいと思うのですが。
そんな時、その場しのぎで使った…ことがあったかもしれません。
ただ、割とあります。
その場しのぎすることって。
ですので、そういった時にこんな邪道なたまには使えます。
afterの文字を改行する
さいごはafter
で指定した文字を改行させましょう。
<p>ほぼほぼ</p>
p::after {
content: 'new\Aold';
white-space: pre;
}
ほぼほぼ
改行したいところに、\Aと入力。
「\」はMacだと、「optionキー」+「¥キー」で入力できます。
それとwhite-space: pre
と指定すれば、改行されます。
「\A」は改行を表すコードだとか。
調べてみたんですが、ほとんど情報が出てきませんでした。
ちなみに、white-space: pre
がないと「new」と「old」の間に半角スペースが入るだけになり改行されません。
<p>ほぼほぼ</p>
p::after {
content: 'new\Aold';
white-space: pre;
}
ほぼほぼ
ちょいと気をつけたいのが、\Aのあとに数字を入れる場合。
<p>ほぼほぼ</p>
p::after {
content: 'new\A123';
white-space: pre;
}
ほぼほぼ
ご覧のように「123」が表示されません。
しかもnewのうしろに記号っぽいのが出てますね。
こういう場合は、\Aのうしろに半角スペースを入れると、改行して表示できますね。
<p>ほぼほぼ</p>
p::after {
content: 'new\A 123';
white-space: pre;
}
ほぼほぼ
というわけで、またまた急な終わりです。
参考サイト
この記事の内容は「CSS3」をもとに紹介しました。
「CSS3」はcssのルールブックみたいなもので、その最新版です。
どちらも翻訳です。
まとめ
ちょっと寄り道しながらやる方が、結果的には使い方もよく分かるようになるので。
余裕がある時、いろいろと試してみてください。