[CSS] 가상요소 ::before, ::after (+가상요소 줄바꿈)알아보기!

지원되는 브라우저

chrome1.0+, edge, firefox, Internet Explorer, opera7.0+, safari1.0+, samsung internet

 

요소에 장식용 컨텐츠를 추가할 때 사용

html 파일에서 확인 할 수 없는 가상요소임

속성 content를 써주어야 하며 속성내에 텍스트나 이미지를 추가할 수 있음

 

::before, ::after 사용예시

a::before{
  content:'before';
  /* a태그 앞에 before가 붙음 */
}
a::after{
  content:'after';
  /* a태그 뒤에 after가 붙음 */
}

 

before 예시

::before는 해당 요소 앞에 붙음

 

after 예시

::after는 해당 요소 뒤에 붙음

 

- 위에 예시를 개발자도구(f12)로 확인가능하며 해당 css도 확인할 수 있다

 

 

 

 

가상요소에 html 속성 값, 이미지 넣기

.text-tag::after{
  display: inline-block;
  content: attr(data-content);
  /* 
  html 파일의 data-content 가져옴 
  ex) content: attr(class); 일 경우 
    -> attr에는 class명(text-tag)가 들어와 태그 뒤에 text-tag가 붙는다
    
  ex) content: url('이미지경로');
    -> 원하는 이미지 출력(크기조절 불가능)
    -> 원하는 이미지 출력(크기조절 가능은 밑에 활용예시 참고
  */
  color: red;
}

 

 

 

::after 활용예시(이미지)

nav 상단에 new tag는 가상요소 / 가상요소의 css

- width, height로 크기 조절 해준 후 background에 이미지를 깔아줌

- background-size 로 이미지 크기를 조절 할 수 있음

 

<div>
  <p class="text-tag" data-content="여기서부터 가상요소 텍스트 입니다! 색도 바꿨어요">가상요소 테스트 /</p>
</div>

가상요소 테스트 /

 

 

 

가상요소 텍스트 줄 바꿈

.enter::after{
  content: '텍스트\A줄바꿈';
  /* 줄바꿈 원하는 곳에 \A 추가 */
  background: white;
  white-space:pre;
  /* (넘칠경우 자동줄바꿈) */
  text-align: center;
}

 

 

 

+ 추가로 가상요소에 html 태그 삽입 

html 속성값을 가상요소에 넣고 줄바꿈 하고 싶었는데 부트스트랩이 아니면 불가능한 것 같았다,,

결국 패딩값이랑 max-width, min-width 사용해서 임시로 만들어놓음 ,, 

가상요소 content 속성 내에 html 태그 삽입은 불가능

참고

 

https://stackoverflow.com/questions/14459691/bootstrap-popover-hides-line-breaks

Bootstrap popover hides line breaks

 

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

CSS content 속성? before, after 및 이미지와 줄바꿈 사용법 - dAsImA