브라우저에서 : before 및 : after 가상 요소를 어떻게 검사하고 조정할 수 있습니까?

: after 의사 요소를 사용하여 상당히 정교한 DOM 요소를 만들었으며 Chrome Inspector 나 Firebug 또는 이와 동등한 요소에서 검사하고 조정할 수 있기를 원합니다.

이 기능 이이 WebKit / Safari 블로그 게시물 (2010 년) 에 언급 되었음에도 불구하고 Chrome 또는 Safari에서이 기능을 전혀 찾을 수 없습니다. Chrome에는 적어도 : hover, : visited 및 : active 상태를 검사하는 확인란이 있지만 : before 및 : after는 표시되지 않습니다.

또한 이 블로그 게시물 (2009 년 날짜!)에서는이 기능이 IE 개발 도구에 존재한다고 언급했지만 현재 Mac OS를 사용하고 있으므로 도움이되지 않습니다. 또한 IE는 내가 주로 대상으로하는 브라우저가 아닙니다.

이러한 의사 요소를 검사하는 방법이 있습니까?

편집 : Firebug가 이러한 요소를 검사 할 수 없다는 것에 대해 잘못되었을뿐만 아니라 Opera가 Inspecting : before 및 : after 요소를 검사하는 데 꽤 능숙하다는 것을 알았습니다.

에서 크롬의 개발 도구 , 의사 요소의 스타일은 패널에서 볼 수 있습니다 :

그렇지 않으면 JavaScript 콘솔에 다음 줄을 입력하고 반환 된 CSSStyleDeclaration개체를 검사 할 수도 있습니다 .

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Chrome에서 31 개의 유사 요소는 다음 이미지와 같이 상위 요소의 하위 요소로 요소 패널에 표시됩니다.

일반 요소처럼 선택할 수 있지만 content스타일을 제거 하면 의사 요소도 제거되고 devtools 포커스가 상위 요소로 변경됩니다.

상속 CSS 스타일이라는 것을 표시 하지 볼 수 있습니다 당신은 요소 패널에서하지 편집 CSS의 콘텐츠 수 있습니다.

"content"속성이 누락 된 경우 Chrome은 DOM 트리의 : before 및 : after 의사 요소를 표시하지 않습니다. 아무것도 설정하지 않아도 설정해야합니다.

표시되지 않습니다.

:after {
  background-color: red;
}

이것은 인스펙터에 나타날 것입니다 :

:after {
  content: "";   
  background-color: red;    
}

도움이 되었기를 바랍니다.

많은 좌절 끝에 firefox가 문서 트리 에 의사 요소를 전혀 표시하지 않는다는 것을 알았 습니다 .하지만 의사 요소가 정의 된 정확한 요소를 선택하면 의사 요소의 스타일이 )는 오른쪽의 스타일 규칙 섹션에 표시됩니다. 이것은 방화범과 내장 검사 ( "Q") 모두에 해당되며, 이전에 아무도 이것을 명확하게 설명하지 않았다는 사실에 놀랐습니다.

분명히 chrome / chromium의 유사 요소 처리는 "소유자에 관계없이 레이아웃, 속성 및 기타 모든 요소를 ​​사용하여 일반 요소처럼 선택 (문서 트리 및 페이지에서 직접)하고 검사 할 수 있기 때문에 매우 우수합니다. ".

현재 사용중인 브라우저 버전 : Chromium 40.0.2214.91, Firefox 31.3.0.

파이어 폭스는 잠시 동안이 기능을 가지고 있습니다. 우클릭하고 "요소 검사"를 한 다음 인스펙터의 오른쪽 패널에서 이전과 이후 요소를 확인하세요.

요소 선택-> 선택 호버 선택 ---> 당신은 :: 요소 전후를 볼 수 있습니다

적어도 Chrome 62 이후로 DevTools에는 입력 자리 표시 자와 같은 추가 의사 요소 를 표시하는 'Show user agent shadow DOM'설정이 있으며 , 그렇지 않으면 DOM 트리에 표시되지 않습니다.

추가 정보 : https://stackoverflow.com/a/26853319/3963594