CSS - ::before, ::after

dodo1320·2024년 3월 20일
0

프론트엔드(240102~)

목록 보기
26/26
post-thumbnail

현재 페이지에 적혀있는 글씨 밑에 추가적인 내용을 적으라는 요청이 들어왔음.
추가로 한 줄 더 적고 글씨크기를 줄여야하는건가라고 생각했는데 가상 요소 선택자라는 것을 사용해서 만들라고 하였음.

pseudo-element selector

MDN 설명 페이지
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::after

추가 설명
https://webroadcast.tistory.com/4

::before - 선택된 요소 앞을 꾸며주는 가상 요소 선택자
::after - 선택된 요소 뒤를 꾸며주는 가상 요소 선택자

  • 같은 모양을 여러 개 만들 때 유용
  • 앞, 뒤라고 쓰여있지만 이동할 수 있어서 밑줄이나 추가 설명할 때도 사용할 수 있음

사용법

  • 위치를 잘 고정하기 위해서는 메인 요소에는 position: relative, 가상 요소 선택자에는 position: absolute를 하면 편함.
  • content에 원하는 부가 설명을 기입
  • 나머지는 원하는대로 css로 꾸며줌
profile
beginner

0개의 댓글