CSS 가상요소 ::before , ::after

때는 바야흐로.. 6.15일..(한달반전)

<a href="..개인정보처리방침페이지" target="_blank" rel="noopener noreferrer">개인정보 처리방침</a>
<span>|</span>
<a href="취소환불정책 페이지" target="_blank" rel="noopener noreferrer">취소 및 환불 정책</a>

이 화면을 만들기 위해 위와 같이 코드를 작성한 일이 있었다.

코드리뷰로 다음과 같이 코멘트가 달렸다.

 

요거를 before나 after를 사용해서 구현하는건 어떨까요..? 큰 문제는 아니지만.. 나중에 a태그가 더 추가되면 관리하기 더 편할 것 같아서요!

 

사실 before, after를 보기만 했지 뭔지도 몰랐고 관심도 없었었다. 이번기회에 알아보았다.

CSS 가상요소

가상요소	설명
::before	요소 내용 앞에 새 컨텐츠 추가
::after	요소 내용 끝에 새 컨텐츠 추가
::selection	마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택
::marker	목록 아이템 앞에 붙는 마커 선택
::first-letter	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택
::first-line	현재 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택

 

selector로 선택한 요소의 뒤에 붙여 표기하는 약속된 키워드

 

HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나,

 

HTML 콘텐츠의 내용을 변경하지 않고도 요소 앞 뒤에 새 콘텐츠를 추가하는 기능

 

이중에서 나는 after를 사용하였다.

Content

before, after를 사용할 때는 content가 필요하다.

 

content는 ::before,::after와 함께 쓰이는 가짜 속성이다.

 

HTML문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜준다.

 a {
            color: #5a5a5a;
            &::after {
              padding: 0 4px;
              content: '|';
            }
            &:last-child::after {
              content: '';
            }
}

a 태그의 끝에 4px을 주고 '|' 표시, 마지막 요소에는 '' 표시

 

또다른 활용예시

나라면 다음과 같은 경우에 <span> '진짜 맛있는' </span> 을 직접 추가했을텐데

 

이렇게 before를 사용하는 것도 좋은 방법인 것 같다.

http://blog.hivelab.co.xn--kr-pnk/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

---

참고자료

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

https://blogpack.tistory.com/1025