before after css 가상요소 선택자

before와 after 가상요소 선택자 css

::before 요소의 맨 앞에 배치하는 마크업에 없는 가상요소
::after 요소의 맨 뒤에 배치하는 마크업에 없는 가상요소

:::before 와 ::after을 마크업할 경우,
필수로 {content:""; } 이 들어가야 한다.

문자를 표시할 때는 따옴표 안에 문자를 넣으면 된다.
다른 기능을 하면서 문자가 없을 경우 빈따옴표만 넣으면 된다.
그리고 inline 속성을 가지고 있으므로 크기 값을 주려면 {display: inline-block; }이나 {display: block; }속성을 넣어줘야한다.

.test1::before {display: block; content:"";}

예제를 통해서 확인해보자.

<!doctype html> 
<html>
    <head> 
        <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes"> 
        <title>가상요소 선택자</title> 
        <style>
            .test1 {margin:0 auto; max-width:600px; padding:50px; border:1px solid #ccc;}
            .test1::before {display:block; content: ""; background: pink;padding: 20px;}
            .test1::after {display:block; content: ""; background: skyblue;padding: 20px;}
            .yyy::before {display:block; content: "앞";}
            .yyy::after {display:block; content: "뒤";}
            
            .test2 {margin: 0 auto; width: 500px; border:1px solid red; height:50px;; position: relative;}
            .test2::before {display:block; content: ""; width:2px; height:50px; background: #000; transform: rotate(45deg); position: absolute; top:0; left:100px;}
            .test2::after {display:block; content: ""; width:2px; height:50px; background: #000; transform: rotate(-45deg); position: absolute; top:0; left:100px;}
        </style> 
    </head> 
    <body> 
        <div class="test1">
            <p class="yyy">*********</p>
        </div>
        <br>
        <div class="test2">
        </div>
    </body> 
</html>

.test1에 ::before를 적용할 경우,
.test1이 가지고 있는 블럭 안에 맨 앞에 속성이 적용된다.
여기서 헷갈리지 말자.
.test1 블럭 앞에 적용되는 것이 아니다.

.test1이 포함하고 있는 컨텐츠 맨 앞에 위치하게 된다.
::after를 적용할 경우,
.test1이 포함하고 있는 컨텐츠의 맨 뒤에 위치하게 된다.

.yyy::before과 .yyy:after을 이용해서 .yyy가 감싸고 있는 컨텐츠의 맨 앞에 "앞"과 맨 뒤에 "뒤"글자를 표시했다.

겹쳐질 경우 ::before는 맨 뒤에 놓이게 되며, ::after은 맨 위에 놓이게 된다.

.test2의 경우 햄버거 메뉴를 클릭했을 때 나오는 창닫기 X 버튼을 ::before와 ::after로 만들었다.

<!doctype html> 
<html>
    <head> 
        <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes"> 
        <title>가상요소 선택자</title> 
        <style>            
            .test2 {margin: 0 auto; width: 500px; border:1px solid red; height:50px;; position: relative;}
            .test2::before {display:block; content: ""; width:2px; height:50px; background: #000; transform: rotate(45deg); position: absolute; top:0; left:100px;}
            .test2::after {display:block; content: ""; width:2px; height:50px; background: #000; transform: rotate(-45deg); position: absolute; top:0; left:100px;}
        </style> 
    </head> 
    <body> 
        <div class="test2">
        </div>
    </body> 
</html>

저작자표시

'HTML&CSS' 카테고리의 다른 글

white-space css(div 줄바꿈 방지 css) (2)	2021.12.06
background css 축약, 한번에 쓰는 방법, 줄여서 써보자 (1)	2021.12.01
반응형 백그라운드 이미지 만들기 (0)	2021.11.18
이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) (0)	2021.06.16
무료 아이콘 사이트 - BEST 8개 사이트🍄 (0)	2021.06.08

잡다지식 | 🍋에이망고🍓🍋🍉

before after css 가상요소 선택자

before와 after 가상요소 선택자 css

'HTML&CSS' 카테고리의 다른 글

티스토리툴바

before after css 가상요소 선택자

before와 after 가상요소 선택자 css

'HTML&CSS' 카테고리의 다른 글

'HTML&CSS' Related Articles

티스토리툴바