Pseudo-element
의사 요소
의사 요소(pseudo-element)는 CSS가 소스 HTML에 일반 요소가 없는 부분이나 상자를 스타일링할 수 있게 합니다. 예로 첫 글자(first letter)와 생성된 장식이 있습니다.
다른 예시
한 기사에서는 장식용 드롭 캡을 위해 `::first-letter`를 사용하고 선택된 텍스트를 읽기 쉽게 유지하기 위해 `::selection`을 사용합니다. 필수 입력 표시 별표는 `::before`만으로 만들어지지 않습니다. 색상이나 생성된 내용이 없더라도 '필수'는 여전히 legend에 표시되며 소프트웨어에서 접근 가능합니다.
주요 부분
- 01기원 요소
- 02의사 요소 트리 추상화
- 03생성되었거나 선택된 조각
사용할 때
선택적 장식이나 정의된 텍스트 부분에는 의사 요소를 사용하십시오. 의미가 없는 경우 빈 DOM 요소를 추가하지 마십시오.
다음 경우에는 사용하지 마세요
필수 지침, 작동하는 컨트롤, 또는 접근 가능한 유일한 레이블을 생성된 콘텐츠에 넣지 마세요.
코드에서 사용된 이름
::before, ::after, ::marker, ::selection, ::first-letter 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 의사 요소 (Pseudo-element)。 User context：한 기사에서는 장식용 드롭 캡을 위해 `::first-letter`를 사용하고 선택된 텍스트를 읽기 쉽게 유지하기 위해 `::selection`을 사용합니다. 필수 입력 표시 별표는 `::before`만으로 만들어지지 않습니다. 색상이나 생성된 내용이 없더라도 '필수'는 여전히 legend에 표시되며 소프트웨어에서 접근 가능합니다. Design concept to apply：의사 요소 (Pseudo-element)。 Why it fits：선택적 장식이나 정의된 텍스트 부분에는 의사 요소를 사용하십시오. 의미가 없는 경우 빈 DOM 요소를 추가하지 마십시오. Do not use it when：필수 지침, 작동하는 컨트롤, 또는 접근 가능한 유일한 레이블을 생성된 콘텐츠에 넣지 마세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 의사 요소 (Pseudo-element) is used now. Definition: 의사 요소(pseudo-element)는 CSS가 소스 HTML에 일반 요소가 없는 부분이나 상자를 스타일링할 수 있게 합니다. 예로 첫 글자(first letter)와 생성된 장식이 있습니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.