この記事では、擬似要素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のルールブックみたいなもので、その最新版です。
どちらも翻訳です。
まとめ
ちょっと寄り道しながらやる方が、結果的には使い方もよく分かるようになるので。
余裕がある時、いろいろと試してみてください。