CSS Cheat Sheet

::after (:after)

선택된 element 뒤에 다른 요소들을 추가. 아래와 같이 content attribute에 text를 입력하고 style을 지정하는 것이 가능.

.any-class {
  ...
}
.any-class:after {
  content: " after text"
  color: blue;
}
...
<tag class="any-class">
</tab>

:after 에 hover 적용하기.

after가 적용될 클래스 선택자의 hover 클래스, after 클래스를 정의하고 hover의 after 클래스를 정의.

예제 소스로 표현하면 아래와 같다.

.any-class {
  ...
}

.any-class::after {
  ...
}

.any-class:hover {
  ...
}

.any-class:hover:after {
  // 이 부분에 원하는 속성과 값을 정의
  // 예를 들면 background-color 색깔 변경
}

// 여기부터는 HTML
<tag class="any-class">
  ...
</tag>

button 좁아질 때 text 라인바꿈 방지하기

white-space 속성에 norwap 값을 셋팅하면 됨.