擬似要素before、afterと併用するcontentプロパティ

 content プロパティは要素の前や後ろにテキスト・画像を挿入する際に設定します。このプロパティを使用する場合には、擬似要素である ::before または ::after を併せて使います。例えば次のようになります。Yahoo ニュースなどで一度は見たことがあるのではないでしょうか。

20161002_2_1

これを実現するなら次のようにすればよいです。

 ちなみに、content プロパティによって表示したテキストは CSS で作られた架空の擬似要素であるため、選択したりコピー&ペーストすることはできません。HTML で文書として記述されていないからです。

(Yahoo! を確認したのですが、実際には span タグによって実現されていました。だからコピー&ペーストできちゃいます。例がよくなかった(T_T))

 また、ネットで検索するとコロン(:)がひとつのものとふたつのものが出てくると思いますが、CSS3 以降はコロンはふたつになっています。コロンひとつでスタイルシートに記述しても動作はしますが、今後を考えるとコロンふたつに統一しておいたほうがよいでしょう。

 こちらを参考にしました。リンク先では content プロパティをどのように応用すればよいのかをソースコード付きで豊富に紹介されていますので、一度は目を通しておくことをおすすめします。

 content プロパティで当ブログが多用しているのはアイコンフォントです。ブログカスタマイズとして定番のテクニックですが、以前に記事にしましたのでよろしければこちらもどうぞ。

 また、content プロパティの応用として、吹き出しを作ることができます。これは画像を使用せず CSS のみで実現できるので、大きさや色などのカスタマイズが自由自在です。SNS ボタンや見出しに使われているのをよく見かけます。

 content プロパティは HTML 文書に直接記述せずにテキストや画像を挿入するという性質から、擬似要素である before や after と併用する例が多いです。少なくとも併用していない例を私は知らない。

 知らなくてもブログを運営できますが、知っておくとおしゃれなカスタマイズが可能になり、とても便利です。ブログに来てくれる人はデザインを見にくるわけではありませんが、イケてるデザインを目にするとテンションも上がるというものです。ライバルに差をつけられるようにがんばってください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP