[CSS]가상선택자 :before / : after 활용하기

해당 태그 앞과 뒤에 생기는 가상선택자로 

content 속성이 꼭 있어야한다.

목록의 리스트 도형을 만들 수도 있고

 

아래와같이 꾸밈에 사용할 수도 있다. 

 

 

 

 

 

 

아래와같은 코드로 삼각형모양을 만들 수 있다. 

 

선은 아래와 같이 표현된다. 

기본 투명으로 선을 원하는 높이만큼의 두께로 그린뒤 -   transparent (투명)

원하는 방향의 선 색을 주면 삼각형 모양으로 나온다. 이를 이용해 위에처럼

리본을 만들수도 있고 말풍선을 만들수도있다. 

border: 10px solid transparent; 
border-top-color:#000;