티스토리 뷰

프로그래밍/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>



'프로그래밍 > CSS 3.0' 카테고리의 다른 글

모퉁이 잡아당겨서 크기 조절하기. resize 속성  (0) 2012.03.20
first-child, last-child  (0) 2012.03.20
가상요소 - selection  (0) 2012.03.20
border-radius 테두리를 둥글게 하는 스타일  (0) 2012.03.20
target (타겟)  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함