2年 ago
1276 Views

要素の内容の前後にテキストや画像を表示したい場合の疑似要素の使い方

css

要素の前後に何かを表示したい場合は、cssの:beforeと:after疑似要素を使かって表示のコントロールをしましょう。before afterを使うとデザインの幅も広がります。

:before :after疑似要素とは?

:before :after疑似要素は、ある要素に含まれる内容の前(:before)や後(:after)に指定した内容を生成する疑似要素。contentプロパティとの組み合わせによって、htmlには記述されていないテキストや画像などをCSSで追加することができます。セレクタを使用して特定のリンクにアイコンを表示するなど、利用価値の高い疑似要素です。

アイコンをつける

noteのクラスがついたp要素に:before疑似クラスを指定してその段落の頭に特定のアイコンをつけることも可能

特定のURLマッチした場合にアイコンをつける

PDFファイルに対するリンクにのみ、頭にPDFアイコンをつけることもできます

吹き出しをつくる

吹き出しや↓などもbefore&after疑似要素を使ってborderでつくります

ひし形をつくる

四角やひし形もつくれます

:before :after疑似要素を使った色々なシェイプの作り方「The Shapes of CSS」もチェックしてみて♪

ボックスシャドーをつくる

いくつかのパターンのボックスシャドーをコピペで使える「Creating Different CSS3 Box Shadows Effects

:before&:after対応ブラウザ

  • Chrome
  • Safari4〜
  • Firefox3.5〜
  • Opera6〜
  • IE8〜
Article Categories:
:before&:after · html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ