728x90
반응형
::after와 ::before은
실제와 비슷하지만 가짜인, 가상의 코드인 의사코드(pseudo* code)입니다.
따라서 요소(element)에 ::after나 ::before을 적용시켜
CSS를 속성과 속성값으로 이루어진 내용으로 서술하게 되면,
요소의 뒤나 앞에
서술된 CSS의 내용이 실행됩니다.
예로 아래의 html코드가 있습니다.
<body>
<p>note</p>
<h1>house</h1>
<span>cookie.</span>
</body>
위의 요소들(p, h1, h2, span)에 의사코드를 적용시켜 CSS 코드를 입력해 볼 것입니다.
p::after{
content:" pad++";
//(결과) 'note' 뒤에 'pad++'가 추가. p 뒤에 추가
}
h1::after{
content:" exercise";
color:blue;
//(결과) 추가된 'exercise'에만 글자색이 파란색으로 적용. h1 뒤에 추가
}
span::before{
content:url('image.png');
//(결과) 'image.png' 이미지가 'cookie' span 앞에 추가
}의사코드 내에는 color, content부터 position, display까지 다양한 CSS코드를 적용시킬 수 있습니다.
*pseudo: 가짜의, 가상의
728x90
728x90
'CSS' 카테고리의 다른 글
| [ CSS ] @keyframes 애니메이션 효과 (0) | 2020.04.05 |
|---|---|
| [CSS] display: inline-block; (0) | 2019.11.27 |
| [CSS] CSS 단위(unit) : vw (0) | 2019.11.27 |
| [CSS] 글자 간격 조정 (0) | 2019.11.27 |
| [CSS] vertical-align (0) | 2019.11.25 |
댓글