CSS擬似要素 ::before ::after の使い方

擬似要素 ::before ::after の使い方 をご紹介します。


「擬似要素 ::before ::after」は指定した要素の前後に挿入されます。
f:id:somegoro:20160627043904p:plain


例を出して、実際に確かめてみましょう。


スタイルシート(css)

p::before {content:"まぁ、";}
p::after {content:"うん、たぶん。";}
strong::before {content:"!";}
strong::after {content:"!";}

※content についての説明はこちらをどうぞ→「 content 」について - 生活情報オンライン



HTML

<p>ブログは毎日書いた方が良い。</p>
<p>それはまさに<strong>真理</strong>です。</p>
<p>あの<strong>Google先生</strong>もそうおっしゃっていました。</p>


普通ならこう表示されます。

ブログは毎日書いた方が良い。

それはまさに真理です。

あのGoogle先生もそうおっしゃっていました。


疑似要素 ::before ::after のスタイルシート(css)を読み込むとこう表示されます。

まぁ、ブログは毎日書いた方が良い。うん、たぶん。

まぁ、それはまさに!真理!です。うん、たぶん。

まぁ、あの!Google先生!もそうおっしゃっていました。うん、たぶん。


この疑似要素の他用途としては、「影付き図」や「float解除」などに応用が効きます。


疑似要素は古くから存在していましたが、css3になって微妙に書き方が変化しています。今回の記事に記載したのはいずれもcss3に対応した書き方です(::before ::after)。詳細はこちらへどうぞ。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック


後書き:
最高に思われた::before ::after ですが、画像サイズの調整が出来ないようですね。
height width が効かないようです。background で画像表示するとサイズ指定は出来るのですが画像が全体表示されなくなってしまいます。
この辺りの解決方法を探しています。transform:scale()で良い調整の方法ないかなぁ。。