CSS :before :after 텍스트 겹치기 z-index

1 개요

CSS :before :after 텍스트 겹치기 z-index

• z-index: -1;(암튼 음수)을 주면 content가 텍스트보다 뒤에 위치하게 된다.
• 만약 배경색이 있으면(투명이 아니라면) 배경에 가려서 보이지 않게 된다.

html

Copy

<style>
  .box1:before {
    color: orange;
    content: "★";
    font-size: 3em;
    margin: -.6em 0 -1em 0;
    position: absolute;
  }

  .box2:before {
    color: skyblue;
    z-index: -1;
    content: "★";
    font-size: 3em;
    margin: -.6em 0 -1em 0;
    position: absolute;
  }

</style>

<div class='box1'>어쩌구</div>
<br><br>
<div class='box2'>어쩌구</div>

2 같이 보기

• CSS :before
• CSS :after
• CSS z-index
• 폰트어썸 아이콘 배경그림으로 사용하기