[HTML・CSS]擬似要素、before,afterの基本形。

[HTML・CSS]擬似要素、before,afterの基本形。

2015年09月25日 /最終更新:2017年08月17日

CSSで擬似要素、before,afterを使うときの基本形です。

[HTML・CSS]擬似要素、before,afterの基本形。

CSSの擬似要素、「before」「after」の基本形です。

CSS

◯◯:before,
◯◯:after {
  display: block;
  content: "";
  width:;
  height:;
  position: absolute;
  left: 0;
  top: 0;
}

対象の要素「◯◯」の疑似要素の基本形のCSS設定。

擬似要素にposition : absolute;(絶対位置指定)を指定してあるので、
対象要素「◯◯」にはposition: relative;を忘れずに。