[CSS] 가상 요소 (Pseudo-elements)

hs·2023년 4월 18일
post-thumbnail
  • 선택자에 키워드를 추가하여 해당 요소의 특정 부분에 스타일을 지정할 수 있다.

문법

selector::pseudo-element {
  property: value;
}

예제 모음

::after

  • 선택자의 자식 요소 중 마지막 가상 요소를 생성
<html>
  <style>
    a::after {
      content: " (" attr(href) ")";
    }

    .dead-link {
      text-decoration: line-through;
    }

    .dead-link::after {
      content: url("https://interactive-examples.mdn.mozilla.net/media/warning.svg");
      display: inline-block;
      width: 12px;
      height: 12px;
    }
  </style>
  <body>
    <p>
      The sailfish is named for its sail-like dorsal fin and is widely
      considered the fastest fish in the ocean.
      <a href="https://en.wikipedia.org/wiki/Sailfish"
        >a 태그 내 콘텐츠 뒤에 href 요소 값 넣음</a
      >.
    </p>

    <p>
      The red lionfish is a predatory scorpionfish that lives on coral reefs of
      the Indo-Pacific Ocean and more recently in the western Atlantic.
      <a href="" class="dead-link">dead-link class 선택자 뒤에 svg 붙임</a>.
    </p>
  </body>
</html>


::before

  • 선택자의 자식 요소 중 맨 앞에 가상 요소를 생성
<html>
  <style>
    a {
      color: #0000ff;
      text-decoration: none;
    }

    a::before {
      content: "🔗";
    }

    .local-link::before {
      content: url("https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg");
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  </style>
  <body>
    <p>
      Learning resources for web developers can be found all over the internet.
      Try out <a href="https://web.dev/">web.dev</a>,
      <a href="https://www.w3schools.com/">w3schools.com</a> or our
      <a href="https://developer.mozilla.org/" class="local-link"
        >MDN web docs</a
      >.
    </p>
  </body>
</html>


[참조]

Pseudo-elements (mozilla)

0개의 댓글