My Space

before, after

2021. 10. 4. 18:50
반응형

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이 붙는거와 같다

'Development > CSS' 카테고리의 다른 글

그리드 (링크)  (0) 2021.11.17
글자수가 길때 줄바꿈이 안되는 경우  (2) 2021.10.14
background 속성  (0) 2021.10.05
li태그 n 번째 요소 고르기(링크)  (0) 2021.10.05

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading