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

브라우저에서 : 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;    
}

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

---

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

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

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

---

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

참고 URL : https://stackoverflow.com/questions/10174719/how-can-i-inspect-and-tweak-before-and-after-pseudo-elements-in-browser