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 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のショートハンド
で触れていますので見てみてください。

Facebook

Twitter