::before ::after 에 content 공백으로 넣기 > IT 기술백서

[code]

::before {

  content: '';

  display: block;

  width: 100px;

  height: 100px;

  border: 1px solid #f00;

}

[/code]

박스안에 내용은 없이 테두리만 주고자 위와 같이 한다고 가정하자.  하지만 이렇게 content 가 비어 있으면 브라우저가 무시해 버린다.

content: ' '  이렇게 공백을 넣어줘도 마찬가지이다.

이때는 escape 문자를 활용한다.

[code]

::before {

  content: '\00a0';

  display: block;

  width: 100px;

  height: 100px;

  border: 1px solid #f00;

}

[/code]

위와 같이 escape 문자 \00a0 을 넣으면 된다.