CSSのセレクタ「擬似要素 ::after」で「ふきだし」を作ってみた

CSSのfloatを解除するclearfix で「擬似要素 ::after」を使います。
その擬似要素 ::after についてまとめ、::after の特徴を使って「ふきだし」も作ってみました。

スポンサーリンク

擬似要素 ::before と ::after

擬似要素の中の ::before と :afterは、要素の直前(::before)または直後(::after)に「テキスト」や「画像」などを表示します。
必ずcontentプロパティと一緒に使います。contentプロパティで指定したモノを表示するので。
表示できるモノは以下の3つ。

「テキスト」を表示する
「content: ‘追加するテキスト’ ;」というカタチで使用。テキストは「”」で囲む。
ul::before {content:'2015年4月調査';}
画像などの「外部メディア」を表示する
「content:url(メディアのパス);」というカタチで使用。
img.portfolio::after {content:url(./image/sign.png);}
その要素の特定の「属性値」を表示する
「content:attr(属性の名前);」というカタチで使用、この属性の「値」をテキストで書き出す。
ins[title]::after {content: attr(title);}
このソースのセレクタ ins[title] は、title属性があるins要素ってこと。要素に[]で属性値を限定する方法。
contentプロパティの値 attr(title) は、title属性の値を書きだす指定。
これで、title属性を持つins要素の直後に title属性の値(2015年4月10日追記 とか)を書き出してくれる。

擬似要素は、CSS2で導入された頃は「:(コロン1つ)」でした。
CSS3からは、擬似クラスとはっきり見分けられるように「::(コロン2つ)」での記述が導入されたそうです。「::after」などと書くようにしたほうが自分もわかりやすいですね。

擬似要素 ::afterで「ふきだし」を作る

擬似要素 ::afterを使って「ふきだし」を作ってみました。

こんなかんじネ
div:afterで、divの直後に小ちゃい三角形を作っている
幅も高さも0のボックスに、top、left、rightにborderを指定すると下向きの三角形になる
それをposition:absoluteで適当な位置に配置しているわけ
ソースはこちら
<div class="fukidashi">こんなかんじネ</div>
.fukidashi {
  position:relative;
  background:#CFF;
  padding:1.5em;
  width:15em;
  margin-bottom:20px;
  border-radius:12px;}
.fukidashi::after {
  content:'';
  position:absolute;
  border-top:10px solid #CFF;
  border-right:5px solid transparent;
  border-left:5px solid transparent;
  bottom:-9px;
  left:20px;}

ボーダーで小ちゃい三角形ができる原理については、
ほんっとにはじめての HTML5【13-1】borderと borderのショートハンド
で触れていますので見てみてください。

Share on FacebookTweet about this on TwitterShare on Google+

関連記事

モーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順

プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイ [記事を読む]

ドロワーメニュー(ハンバーガーメニュー)を簡単な jQueryとCSSだけで作る手順

ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー(ハンバーガーメニュー)にしたくて、プラグインや既存ライブラリなどを使 [記事を読む]

background-attachment: fixed がスマホで効かない問題は ::before で解決!

Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラ [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^