[CSS] 요소의 앞/뒤에 추가 내용 생성 : 전후선택자

WEB/CSS

[CSS] 요소의 앞/뒤에 추가 내용 생성 : 전후선택자

developer of the night sky 2023. 9. 26. 16:14

🔻CSS 선택자🔻

1. 가상 클래스

요소의 특정 상태나 동작을 선택하는데 사용한다.
가상클래스는 한 개의 콜론(:)으로 시작하여, 그 뒤에 가상클래스의 이름이 온다.

https://steady-record.tistory.com/entry/CSS-%EA%B0%80%EC%83%81%ED%81%B4%EB%9E%98%EC%8A%A4

[CSS] 요소 선택 : 가상클래스

요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요

steady-record.tistory.com

2. 가상요소

선택자에 추가되어 특정한 상태나 위치의 요소를 선택할 때 사용된다.
가상요소는 두 개의 콜론(::)으로 시작하며, 그 뒤에 가상요소의 이름이 온다.

🔻전후선택자🔻

선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다.
주로 첨삭할 때 사용한다.

1. ::before (= :before)

2. ::after (= :after)

<body>
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. <span>Ex praesentium</span> voluptatem sed, fuga molestias, soluta et ut doloribus ad eum ratione! Aspernatur itaque id inventore alias voluptatem consectetur aperiam dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae hic et quasi eveniet aliquam quis obcaecati reiciendis? Assumenda iure, harum dolorem aut consectetur, eligendi, odit modi deleniti minima expedita autem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span>Officiis explicabo maxime</span> sed iusto fuga neque architecto distinctio illum dignissimos. Odio corrupti perspiciatis eius <span>exercitationem</span> tempora quam, accusamus itaque laudantium atque?</p>

</body>

    <style>
        p > span {
            color: blue;
        }

        p > span::before {
            content: "[";
            color: orange;
        }
        
        p> span::after {
            content: "]";
            color: orange;
        }



    </style>

저작자표시 (새창열림)