CSSだけで吹き出しを作る方法
画像やJavaを使わずCSS3だけでオブジェクトのホバー時に補足テキストの吹き出しを作ることができます。
『:hover』にも『:before』『:after』が有効ですので、マウスオン時にだけ表示さたい場合は『:hover:before』もしくは『:hover:after』とします
考え方としては『:before』で角丸長方形のブロック要素を作りその下に『:after』で下への出っ張り部分を作ります。
また、要素を三角形にする方法は『height』と『whidth』を『0』にして『border:』で一括指定でプロパティ『transparent』を指定し透明のborderを回します。
その直後、border-topを指定しtopのプロパティだけ上書きすれば吹き出しの完成です
この記事へのコメント