CSS ::before 가상 요소

정의와 사용법

CSS ::before 가상 요소는 지정된 요소의 내용 앞에 내용을 삽입하는 데 사용됩니다.

사용 content 속성 값은 삽입하려는 내용을 지정합니다. content의 값은 다음과 같습니다:

• 문자열: content: "Hello world!";
• 이미지: content: url(myimage.jpg);
• 내용 없음: content: none;
• 카운터: content: counter(li);
• 쌍따옴표: content: open-quote;
• 속성 값: content: " (" attr(href) ")";

푸터:주의하세요, 삽입된 내용은 지정된 요소 내부에 여전히 위치합니다. 삽입된 내용은 요소 내부의 다른 내용 앞에 추가됩니다.

사용 ::after 특정 요소의 내용 뒤에 내용을 삽입합니다.

예제

예제 1

특정 요소의 내용 앞에 문자열을 삽입합니다:

p::before {
  content: "Read this: ";
}

직접 시도해보세요

예제 2

특정 요소의 내용 앞에 문자열을 삽입하고 삽입된 내용의 스타일을 설정합니다:

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

직접 시도해보세요

CSS 문법

::before {
  css 선언;
}

기술 세부 사항

브라우저 지원

표에 표시된 숫자는 이 가상 요소를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

관련 페이지

教程:CSS 가상 요소

참조:CSS ::after 가상 요소