반응형
가상 선택자 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' 카테고리의 다른 글
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2024.12.03 |
|---|---|
| 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 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
녹두장군1님의
글이 좋았다면 응원을 보내주세요!
