WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

before after 疑似要素

「:before」「:after」は指定したに場所に文字等を挿入することができる。

p:before {
  content: "挿入する文字";
}
p:after {
  content: "挿入する文字";
}

before、afterで挿入した文字等はドラッグしても選択されない。
(文字として認識されない)
SEO的には意味がない。

画像も挿入することができる。
画像もドラッグ(選択)できない。

リストタグに矢印を挿入

<ul>
  <li>TOP</li>
  <li>Blog</li>
  <li>Category</li>
</ul>
ul li {
  list-style: none;
}
ul li:before {
  content: url("矢印の画像");
  display: block;
}
ul li:first-child:before {
  content: none;
}

疑似要素を繋げて書くこともできる。

注意

出現させた画像はサイズを変更できない。
出現させたものにリンクを貼ることはできない。
IE8はCSS3の「::before」、「::after」は対応していない。
「:before」「:after」はCSS2.1