가상요소 ::before, ::after

가상 요소(Pseudo-Element)란?

– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다.
– 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능합니다.

example 1

1_before_after.html

  <label class="is-required" for="name">Name</label> 
  <input type="text" />

html 문서의 style 태그에 css 적기

    body {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      background: #333;
      color: #fff;
    }

    .is-required::before {
      content: '⭐';
      color: white;
      padding-right: 2px;
    }

    .is-required::after {
      content: '⭐';
      color: white;
      padding-left: 2px;
    }

example 2

example1 의 label, input 태그는 주석처리하고 section 위에
아래의 header 태그를 넣습니다.

  <header>
    <h1>Hello World</h1>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!
    </p>
  </header>

    header {
      display: ?;
      flex-direction: ?;
      justify-content: ?;
      align-items: ?;
      text-align: center;
      height: 100vh;
    }

    header h1 {
      font-size: 6rem;
      margin: 1rem;
    }

    header::before {
      content: '';
      background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.5;
    }