HTML의 ::before Selector

1. CSS ::before 의사 요소
2. ::before를 사용하여 HTML에서 요소 앞에 콘텐츠 추가

이 기사에서는 CSS ::before 의사 요소를 소개하고 HTML에서 해당 응용 프로그램을 탐색합니다.

CSS ::before 의사 요소

::before 선택기는 선택한 요소 또는 여러 요소 앞에 콘텐츠를 삽입하는 데 사용할 수 있는 CSS 의사 요소입니다. 기본적으로 인라인입니다.

content 속성은 종종 ::before 선택자와 함께 제공됩니다. 속성을 사용하면 ::before 선택기로 지정된 위치에 콘텐츠를 추가할 수 있습니다.

이러한 속성을 사용하면 HTML 코드를 변경하지 않고 HTML 문서에서 원하는 위치에 콘텐츠를 추가할 수 있습니다. 선택기 본문에 추가된 콘텐츠에 CSS 스타일을 적용할 수 있습니다.

::before 선택자의 구문은 다음과 같습니다.

selector::before{
    /*Css Properties*/
}

예를 들어 단락 앞에 내용을 추가하고 싶다면 다음과 같이 작성해야 합니다.

p::before{
    /*Css Properties*/
}

HTML로 단락을 작성했지만 제목을 놓쳤다고 가정합니다. 이러한 조건에서 ::before 의사 요소를 사용하여 단락 앞에 제목을 추가할 수 있습니다.

content 속성을 사용하여 제목을 작성하고 스타일을 추가할 수 있습니다.

후반 섹션에서는 ::before 의사 요소를 실질적으로 사용할 수 있습니다.

::before를 사용하여 HTML에서 요소 앞에 콘텐츠 추가

::before를 사용하여 요소 앞에 콘텐츠를 추가하는 방법의 예를 살펴보겠습니다.

예를 들어 div1 컨테이너를 만듭니다. 그런 다음 안에 세 개의 항목이 있는 <ol>을 사용하여 정렬된 목록을 만듭니다.

<li> 태그를 사용하여 원하는 항목을 임의로 작성합니다.

예제 코드:

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

출력은 거의 예측 가능합니다. 3개의 항목을 포함하는 정렬된 목록입니다.

이제 HTML 문서를 변경하지 않고 목록 앞에 일부 항목을 추가합니다.

CSS에서 ::before 의사 요소를 div1과 함께 .div1::before로 사용하여 선택기를 만듭니다. 선택기 본문에서 content 속성을 사용하고 해당 값에 대한 임의의 콘텐츠를 작성합니다.

내용으로 별표 줄을 고려하십시오.

다음으로 각 목록 항목 앞에 항목을 추가해 보겠습니다. li 요소를 선택하고 ::before 의사 요소를 사용해야 합니다.

요소를 .div1 li::before로 선택하고 content 속성을 사용하여 '\2192'를 값으로 추가합니다. '\2192' 값은 오른쪽 화살표의 엔터티 번호입니다.

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

목록 앞에 있는 div1의 내용 앞에 별표(*) 줄이 어떻게 형성되는지 관찰하십시오. 또한 정렬된 목록의 각 지점 앞에 오른쪽 화살표를 삽입했습니다.

이것이 CSS에서 ::before 의사 요소가 content 속성과 함께 작동하는 방식입니다.