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(メディアのパス);