[css/html] ::after (:after) 개념과 사용법

[css/html] ::after (:after) 개념과 사용법

 

# ::after는 앞에 정의된 태그(요소)에 연장선으로 붙여서 내용을 표현할떄 사용한다.

//로그인 영역
#loginWrap .goJoin {
  background-color: red;
  display: inline-block;
  width: 100%;
  padding: 20px 0 0;
}

//뒤에 붙이기
#loginWrap .goJoin::after {
  content: "가나다라";
  display: inline-block;
  clear: both;
  background-color: blue;
}

 

#빨간 영역뒤에 가나다라의 파란 영역이 붙은걸 확인 할 수 있다.

 

# :after는 css2문법 ::after는 css3문법이다, 기본적으론 ::after로 사용하는걸 권장하지만 둘 다 허용은 가능하다.

 

#html #css #after #:: #tag #js