::before 가상 요소 선택자는
선택한 요소의 실제 콘텐츠 앞(before)에 첫 번째 자식처럼 가상의 자식 요소를 생성(generates)하고, 이를 스타일링할 수 있습니다.
이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.
::before 가상 요소 선택자의 형식
::before {
content: /* value → 생성하는 가상의 자식 요소 콘텐츠를 지정: 필수 */;
/* 생성하는 가상의 자식 요소를 스타일링할 속성들을 지정: 옵션 */
}
content 속성은 ::before 가상 요소 선택자로 생성되는 가상의 자식 요소 콘텐츠를 지정하는 속성입니다. 필수적으로 지정
기본 예제
p::before {
content: "👉";
vertical-align: 0.2em;
margin-right: 0.3em;
}
왜 사용할까
이처럼 ::before 가상 요소 선택자는 번거롭게 HTML 문서에 별도의 자식 요소를 직접 마크업하지 않고, CSS만으로 손쉽게 가상 요소를 생성하여 꾸미기 위해 사용합니다.
주의할 점
::before 가상 요소 선택자로 만들어진 가상 요소는 HTML 요소가 아닌 CSS로 생성되는 요소입니다. 따라서 이 요소는 화면에만 보이며, 실제 HTML 구조에는 포함되지 않습니다. 이 특성 때문에 가상 요소의 콘텐츠에 사용자에게 중요한 정보를 담는 것은 스크린 리더를 사용하는 장애인에게 웹 접근성을 방해할 수 있습니다. 웹 접근성을 고려할 때, 가상 요소를 사용할 때는 사용자에게 필요한 정보를 적절히 제공하는 것이 핵심입니다.
https://codingeverybody.jp/css-before-pseudo-element/
CSS ::before：要素のコンテンツの前に挿入される疑似要素セレクタ - codingEverybody
::before疑似要素セレクターは、選択した要素の実際のコンテンツの前（before）に最初の小要素として疑似的な小要素を生成（generates）し、これをスタイリングできます。
codingeverybody.jp
https://coding.courses/css-before-pseudo-element/
CSS ::before – Pseudo-Element Selector Directly Before an Element's Content - codingCourses
The ::before pseudo-element selector generates a child pseudo-element directly before the selected element's actual content, acting as its first child, and allows it to be styled.
coding.courses