W3C 스펙에서
::before - 실제 내용 바로 앞에 생성되는 자식요소
::after - 실제 내용 바로 뒤에 생성되는 자식요소 라고 일컷는다.
이 두가지를 사용하기 위해서는 만드시 content="" 라는 속성이 필요하다.
<div>안녕하세요</div>
<style>
div::before {
content:' 앞에 붙는다 - ';
}
div::after {
content:' - 뒤에 붙는다.';
}
</style>
결과
before, after은 inline형태로 되며,
특성상 width, height가 먹지 않고, padding/margin은 좌우 영역만 조절된다.
즉,
<div>
<span>앞에 붙는다 - </span>
안녕하세요
<span> - 뒤에 붙는다.</span>
</div>
위와 같이 div 앞뒤로 inline 속성인 span이 붙는거와 같다
그리드 (링크) (0) | 2021.11.17 |
---|---|
글자수가 길때 줄바꿈이 안되는 경우 (2) | 2021.10.14 |
background 속성 (0) | 2021.10.05 |
li태그 n 번째 요소 고르기(링크) (0) | 2021.10.05 |