반응형
가상 선택자 after 은 가상 클래스와 사용 방법이 같습니다. 태그나 클래스, 아이디 뒤에 콜론과 이름을 적으면 됩니다. after 의 기능은 좀 특이한데 태그로 감싼 내부 텍스트 끝에 지정한 텍스트를 붙여 넣습니다. 이런 after 기능은 익스플로러 7 이하에 지원되지 않습니다.
▼ after 의 사용법은 간단합니다. 태그나 클래스 뒤에 콜론과 함께 after 선택자를 지정하고 내부에 속성은 content 를 사용합니다. content 에 입력한 텍스트는 컨테이너 요소 안 맨 마지막에 추가되는 것이죠. after 앞에 하나의 콜론을 쓰는 것은 CSS2 의 문법입니다. 익스플로러 8 이나 그 이전 버전에 적용되며 새로운 CSS3 에는 두 개의 콜론을 사용해야 합니다.
태그::after {
content : “추가될 텍스트”;
속성1 : 값1;
속성2 : 값2;
}
▼ 아래 예제처럼 p 태그와 #con 아이디 선택자에 after 를 적용했습니다. content 의 내용이 내부 텍스트 끝에 추가가 되겠죠. 그리고 같이 입력한 속성값들은 content 의 텍스트를 꾸미게 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
p::after {
content: "-필수 입력사항 ";
background-color: yellow;
font-weight: bold;
}
#con::after{
content:"텍스트를 추가한다.";
}
</style>
</head>
<body>
<p>이름 : </p>
<p>아이디 : </p>
<div id="con">내부 텍스트 마지막에 </div>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
|---|---|
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2022.12.19 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
