CSS
가짜 요소

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
수색…


소개

가짜 클래스와 마찬가지로 의사 요소는 CSS 선택기에 추가되지만 특수 상태를 설명하는 대신 HTML 요소의 특정 부분을 범위 지정하고 스타일을 지정할 수 있습니다.

예를 들어, :: first-letter 의사 요소는 선택자에 의해 지정된 블록 요소의 첫 번째 문자 만 대상으로합니다.

통사론

  • selector :: pseudo-element {속성 : 값}

매개 변수

의사 요소 기술
::after 요소의 내용 뒤에 내용 삽입
::before 요소의 내용 앞에 내용 삽입
::first-letter 각 요소의 첫 글자를 선택합니다.
::first-line 각 요소의 첫 번째 줄을 선택합니다.
::selection 사용자가 선택한 요소의 일부와 일치합니다.
::backdrop 최상위 레이어 스택의 요소에 대한 기본 문서를 숨기는 배경을 만드는 데 사용됩니다.
::placeholder 양식 요소의 자리 표시 자 텍스트 스타일을 지정할 수 있습니다 (실험적).
::marker 지정된 요소에 목록 스타일 속성을 적용하는 경우 (실험적)
::spelling-error 브라우저가 철자가 틀린 것으로 표시된 텍스트 세그먼트를 나타냅니다 (실험적).
::grammar-error 브라우저가 문법적으로 잘못된 것으로 표시된 텍스트 세그먼트를 나타냅니다 (실험적).

비고

  • 때때로 당신은 이중 콜론 (볼 :: 대신 하나의)을 ( : ). 이 의사 요소에서 의사 클래스를 구분하는 방법이지만, 인터넷 익스플로러 8과 같은 일부 이전 버전의 브라우저는 단일 콜론 지원 ( : 의사 요소 참조).

  • 하나의 선택자에서 의사 요소를 하나만 사용할 수 있습니다. 성명서의 간단한 선택자 뒤에 나타나야합니다.

  • 가짜 요소는 DOM의 일부가 아니므로 :hover 또는 다른 사용자 이벤트로 타겟팅 할 수 없습니다.

가짜 요소

가짜 요소는 선택기에 추가되지만 특수 상태를 설명하는 대신 문서의 특정 부분을 스타일 할 수 있습니다.

content 속성은 의사 요소를 렌더링하는 데 필요합니다. 그러나 속성은 빈 값을 가질 수 있습니다 (예 : content: "" ). 

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

코드 결과

목록에있는 의사 요소

가짜 요소는 주로 목록의 모양을 변경하는 데 사용됩니다 (주로 정렬되지 않은 목록, ul ).

첫 번째 단계는 기본 목록 글 머리 기호를 제거하는 것입니다. 

ul {
  list-style-type: none;
}

그런 다음 사용자 정의 스타일을 추가합니다. 이 예제에서는 글 머리 기호에 그라디언트 상자를 만듭니다. 

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML 

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

결과

결과



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow