목차
- ::after 예제 - 모든 P요소 안 내용 뒤에 글자 삽입
- ::after 정의
- ::after 예제 - 특정 P요소 안 내용 뒤에 글자 삽입
- ::after 예제 - 불투명한 배경 효과
- ::after 예제 - 가상요소에 링크 걸기
- ::after 에제 - 버튼 클릭 시, 가상요소 토글 적용
::after 예제 - 모든 P요소 안 내용 뒤에 글자 삽입
<style>
p::after {content: " : 강추 "; color:red;}
</style>
<p>홈짱닷컴 (homzzang.com)</p>
<div>
<p>그누보드 배추빌더 홈페이지 제작 소개</p>
<p>HTML CSS 무료 강의 사이트</P>
</div>
<p>누구나 무료 이용 가능</p>
::after 정의
지정요소 뒷부분에 내용 넣을 때 사용.
1.
- 네비게이션메뉴 글자뒤에 이쁜무늬나 이미지 넣을 때 유용.
- 지정요소가 ::after 가상요소의 부모요소 역할함.
2.
줄바꿈해서 추가하려면 아래 코드도 추가. ★ 예제보기
selector::after {content:''; display:block; clear:both;}
※ div가 상자 못 만들어 레이아웃 깨질 때 사용 !! (= 클리어핵)
3. cf.
::before 선택자 - 요소 앞에 내용삽입
::after 예제 - 특정 P요소 안 내용 뒤에 글자 삽입
<style>
p.homzzang:after {content: " : 강추"; color:red;}
</style>
<p
class="homzzang">홈짱닷컴 (homzzang.com)</p>
<div>
<p>그누보드 배추빌더 홈페이지 제작 소개</p>
<p>HTML CSS 무료 강의 사이트</P>
</div>
<p>누구나 무료 이용 가능</p>
결과보기
::after 예제 - 불투명한 배경 효과
body {background:red;}
body::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
결과보기
::after 예제 - 가상요소에 링크 걸기
<style>
div { margin: 20px; }
span:after { content: 'Homzzang.com'; position: absolute; margin-left:5px;}
span.ko { background: yellow; }
span.en:after { background: tomato; }
</style>
<div><span>홈짱닷컴</span></div>
<script>
span = document.querySelector('span');
span.addEventListener('click', function (e) {
if (e.offsetX > span.offsetWidth) {
span.className = 'en';
location.href="https://homzzang.com";
} else {
span.className = 'ko';
}
});
</script>
결과보기
(180807) https://stackoverflow.com/questions/7478336
::after 에제 - 버튼 클릭 시, 가상요소 토글 적용
<style>
p:after {content: " : 강추 "; color:red;}
.no-after::after {
content: "";
}
</style>
<p>홈짱닷컴 (homzzang.com)</p>
<div>
<p>그누보드 배추빌더 홈페이지 제작 소개</p>
<p>HTML CSS 무료 강의 사이트</P>
</div>
<p>누구나 무료 이용 가능</p>
<button type="button" id="hz">클릭</button>
<style>
document.getElementById("hz").addEventListener("click", function() {
var ps = document.getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
if (ps[i].classList.contains("no-after")) {
ps[i].classList.remove("no-after");
} else {
ps[i].classList.add("no-after");
}
}
});
</style>
결과보기
