CSS 의사 요소

이봐 친구, CSS 의사 요소가 어렵다고 생각하십니까?
걱정하지 마세요. 이 CSS를 처음 접했을 때도 어려웠습니다. 이 문서에서 나는 아주 쉬운 방법으로 당신CSS pseudo-elements을 설명할 것입니다. 시작하겠습니다.
내가 당신에게 HTML 페이지에서 단어의 첫 글자만 디자인하는 작업을 주었다고 가정해 봅시다. 어떻게 하시겠습니까? 그 문자에 스팬 태그를 적용한 다음 스타일을 지정하겠습니다. 그러나 내 친구 2021은 그것이 좋은 습관이라고 생각하고 있습니다. 마지막에 한 단어인데 왜 <span> 태그를 적용할까요?

오른쪽?

여기에 이것의 역할이 있습니다pseudo-elements. 의사 요소는 요소의 특정 부분을 사용자 정의하는 데 사용됩니다.
지금까지 CSS 의사 요소가 요소의 지정된 부분에 스타일을 지정하는 데 사용된다는 것을 이해했습니다. 그러나 나는 당신이 그것을하는 방법을 모릅니다.
시작하기 전에 다양한 유형의 CSS 유사 요소에 대해 설명하겠습니다.

사용 가능한 의사 요소는 크게 6가지이며 다음과 같습니다.

::이전

::후

::첫 글자

::첫줄

::마커

::선택

이제 하나씩 논의해 보겠습니다.

::전에

p::before{
   content: 'Hello world';
   color: blue;
}

따라서 before는 클래스나 요소 앞에 내용을 추가하는 데 사용됩니다. 위의 예문Hello world에서는 단락 앞에 파란색으로 삽입됩니다. 이제 원하는 대로 사용자 정의할 수 있습니다.

::후::before와 ::after에는 차이가 없지만 이름에서 알 수 있듯이 before는 요소 앞에 내용을 추가하고 after는 요소 뒤에 내용을 포함합니다.

::첫 글자

p::first-letter{
   color: blue;
}

예제에서 논의한 대로 모든 요소의 첫 글자를 사용자 정의하는 데 사용됩니다.

::첫줄
다시::first-line과::first-letter 사이에는 차이가 없지만 이름에서 알 수 있듯이 모든 요소의 첫 번째 줄을 사용자 정의하는 데 사용됩니다.

::마커
마커는 목록 항목의 마커 스타일을 지정하는 데 사용됩니다.

::선택
솔직히 말하면 이것은 내가 가장 좋아하는 유사 요소입니다. 돔에서 사용자가 선택/강조 표시한 영역을 사용자 지정하는 데 도움이 되기 때문입니다.
예제는 기본적으로 브라우저의 텍스트를 강조 표시하면 배경색이 파란색으로 변경되지만 이제는 직접 사용자 정의하는 것을 의미합니다. 놀랍지 않나요? 나는 당신이 나와 동의 할 것이라고 생각합니다.

따라서 이것은 모두 유사 요소에 관한 것입니다. 여러분이 그것을 좋아하고 새로운 지식을 얻으시기 바랍니다.
고맙습니다!