[CSS] :before, :after 사용하는 방법

배경

모바일 일때와, 데스크톱 일때 밑의 사진처럼 ' / ' 이 필요할 때가 있고 필요하지 않을때가 있다.

이럴때 JS를 써야하나 싶지만 친절하게 CSS에서 지원해준다.

모바일 일때,

HTML

  <span class='seperate'></span>

CSS

  .seperate:before{

    content: " / ";

  }

데스크톱 일때.

HTML

  <span class='seperate'></span>

CSS

  .seperate:before{

    content: "";

    display: block;

  }

이런식으로 CSS에 따라 글자를 넣고 뺄 때,

:before, :after{

  content: "";

}

를 사용해서 넣으면 된다.

before와 after의 차이는 그 객체의 앞, 뒤에 넣느냐의 차이다.

 

2019년 12월 07일 추가

리본 스타일을 만들고 싶을 때에도 쓸 수 있다.

https://codepen.io/nxworld/pen/oLdoWb

Demo: Pure CSS corner ribbon

 

위 사이트에 누군가 아주 잘 만들어 놓았으니 참고해서 만들면 되겠다.