【css】afterをいろいろ触ってみる

【css】afterをいろいろ触ってみる

この記事では、擬似要素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を指定してみる

今度はafterpositionを指定してみましょう。

目指す形はこちら↓

<p>ほぼほぼ</p>
p {
  position: relative;
  text-align: center;
}
p::after {
  content: '▽';
  position: absolute;
}

ほぼほぼ

※文字を中央に持ってきました。

<p>へのposition: relativeの指定忘れが結構多いので、気をつけましょう。

【参考記事】positionの使い方|要素を見失わないために

ちなみに、afterの親要素は<p>と解釈してます。

僕は。

さっきの図を見てもらうと、::afterが<p>の入れ子になってるので。

で、上ではtopleftは指定してません。

この場合、▽はこれまでと同様に「ほぼほぼ」のうしろに位置します。

で、まずは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のルールブックみたいなもので、その最新版です。

どちらも翻訳です。

まとめ

ちょっと寄り道しながらやる方が、結果的には使い方もよく分かるようになるので。

余裕がある時、いろいろと試してみてください。

タイトルとURLをコピーしました