웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
before, after 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>~앞에, ~뒤에 콘텐츠(내용) 추가할 때 사용되는 가상 요소선택자</title>
<style type="text/css" media="screen">
p {
width: 300px;
}
</style>
<style type="text/css" media="print">
p a:after { /* p요소 앞에 내용(content) 추가 */
content: "(" attr(href) ")";
color: #5c7c88;
}
</style>
</head>
<body>
<!-- ~앞에 내용추가 -->
<p><a href="http://m.naver.com/">mobile naver web site</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <a href="http://m.daum.net/">moblie daum web site</a>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://www.coolhomepages.com/cda/10commandments/">WDA</a></p>
</body>
</html>
'css' 카테고리의 다른 글
| margin 외부여백 (0) | 2011.11.11 |
|---|---|
| 실제 콘텐츠가 없는 CSS 디자인 하기 (0) | 2011.11.11 |
| CSS 가상으로 요소 추가 (0) | 2011.11.11 |
| language 속성 (0) | 2011.11.11 |
| CSS first-child (0) | 2011.11.11 |