7일차 - 가상선택자 ::after (4)

ex) ::after 가상 요소를 사용해 제품 목록에 'NEW'라는 텍스트를 추가

HTML

 <div class="container">
    <h1>제품 목록</h1>
    <ul>
      <li class="hot">제품 A</li>
      <li>제품 B</li>
      <li>제품 C</li>
      <li class="hot">제품 D</li>
    </ul>
  </div>

CSS

<style>
  .container {
    width: 960px;
    margin : 0 auto;
  }
  ul li {
    margin:15px;
  }
</style>

'NEW'라는 내용을 화면에 표시하기 위해 실제로 HTML 문서를 수정하지 않아도,
가상 요소를 사용하면 쉽게 스타일을 적용할 수 있다.

<style>
  .container {
    width: 960px;
    margin : 0 auto;
  }
  ul li {
    margin:15px;
  }
  li.hot::after {
    content:"NEW!!";
    font-size:x-small;
    padding:2px 4px;
    margin: 0 10px;
    border-radius:2px;
    background:#f00;
    color:#fff;
  }
</style>

---

HTML

 <button id="allMenu">햄버거</button>

CSS

<style>
  #allMenu::after{
      content: "OPEN";

  }

  #allMenu.open::after{
      content: "X";
  }
</style>

제이쿼리

<script>
    $(document).ready(function(){

        $('#allMenu').click(function(){

            $('#allMenu').toggleClass('open'); // 특정 클래스 줬다/뺐다
        });
    });
</script>