프로그래밍/CSS 3.0
가상요소 before, after
쇠주는참이슬
2012. 3. 20. 11:01
특정 요소의 내용 앞이나 뒤에 지정한 내용을 만든다.
content 속성과 함께 사용해서 텍스트나 이미지를 추가할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Selectors</title>
<style>
li.ios:before {
content : url(ios_icon.gif) ;
margin-right:5px;
}
li.win:after {
content: "망고(Mango)";
text-transform:uppercase;
color:red;
}
</style>
</head>
<body>
<section>
<h1>모바일</h1>
<ul>
<li class="ios">iOS</li>
<li>안드로이드</li>
<li class="win">윈도우 </li>
</ul>
<ul>
<li>사파리</li>
<li>오페라미니</li>
<li>안드로이드 기본 브라우저</li>
</ul>
</section>
</body>
</html>