css) 가상요소 ::before & ::after

📝참고자료 :https://www.youtube.com/watch?v=nvdgIsqEegQ&t=1s

 

✅가상요소란?

- HTML 상에서 코드를 만들지않고, CSS에서 스타일로만 요소를 추가하거나 제어할 수 있는 속성

 

:::before 와 ::after을 css에 넣으려면
필수로 {content:""; } 이 들어가야함

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

 

✅코드펜 예시

See the Pen Untitled by EllaSEON (@ellaseon) on CodePen.

 

✅가상요소로 형광펜 줄긋기 

See the Pen Untitled by EllaSEON (@ellaseon) on CodePen.

 

✅위처럼 한줄에서의 가상요소가 아니라 다양한 요소에서 가상요소는 어디에 위치할까?

ul>li>버튼이 있고 버튼에 no-stock이라는 클래스를 주고 before 가상요소를 주면

아래와 같이 자식 요소들의 맨 처음에 before가 위치하게된다.

그래서 content:'품절'이 이미지 옆에 위치하는 것을 볼 수 있다.

li .no-stock::before{
 content:'품절'
 }

after 가상요소를 사용하면 자식 요소의 맨 마지막에 위치하게돼서

span 태그인 1000원 옆에 붙게된다!

✅가상 요소의 content 안에는 url(이미지주소) 을 넣어서 이미지를 넣을 수있다.

하지만 잘 사용하지 않는다. 왜냐하면 이미지 사이즈를 조절할수가 없어서!! 

그래서 가상요소의 이미지는 background-image로 제어한다!

 

출처 : https://dasima.xyz/css-content/