CSS에 ":: before"가있는 버그 (?)

내 사이트에 멋진 CSS를 만들었으므로 코드가 무엇인지 아닌지 알 수 있습니다.CSS에 ":: before"가있는 버그 (?)

이제 코드 블록이있을 때마다 "코드 :"텍스트가 코드 블록 위에 위치해야합니다.

이

.code::before { 
content: "Code: "; 
}

이제 문제는 텍스트 "코드"이다 : 코드 블록 안에, 내가 무엇을 할 수

그래서 내가 이런 짓을? 감사합니다.

출처

2014-09-26 Ishay Frenkel

여기에 * 버그 *가 표시되지 않습니다. 이것이 CSS 생성 내용의 예상되는 동작입니다. –

선택자':: before'와':: after'는 내용을 목표 태그에 추가합니다. 태그 앞에 추가하려면 스크립트를 사용해야합니다. –

더 이상 응답 할 공간이 없습니다. 그러나 당신은 고려하고 싶을지도 모르다 : http://jsbin.com/jupaz/1/edit –

; 의사 요소는 줄 바꿈을 만들지 않습니다. 여기에 해결 방법은 다음과 같습니다

.code { 
    position:relative; 
    margin-top: 1em; 
} 
.code::before { 
    position: absolute; 
    top: -1em; 
    left: 0; 
    content:"Code: "; 
}

데모 : 여기 http://jsfiddle.net/vro5ojb9/

출처

2014-09-26 19:53:13 Mooseman

대단히 감사합니다! 몇 가지 변경 사항을 적용하여 완벽하게 보입니다. –

도와 드리겠습니다! http://meta.stackex.com/questions/5234/how-does-accepting-an-answer-work을 참조하십시오. – Mooseman

예, 2 분 정도 기다려야한다고 말한 다음 이것을 대답으로 표시하고 감사드립니다. 너 :) –

.code::before은 다른 하위 요소보다 먼저 첫 번째 요소로 .code 내부의 의사 요소를 의미합니다.

문서에 .code 앞에있는 요소를 의미하지 않습니다.

CSS Selectors:

5.12.3 : 전 : 가상 엘레멘트 후

'이전'과 '이후'의사 요소 생성 한 콘텐츠를 삽입하는데 사용될 수있다 요소의 내용 앞이나 뒤에

코드는 정확하게 정의 된대로 수행하고 있으며 버그가 아닙니다.

참조 : http://www.w3.org/TR/CSS2/generate.html 귀하의 코드가 제대로 작동

출처

2014-09-26 19:49:34 Arbel

실제로 인스턴스 전에 <p> 태그를 삽입하는 간단한 jQuery를이 필요 오프셋 없습니다 것 위치 :

$(function() { 
$($('<p>').html('Code: ')).insertBefore('.code'); 
});

JSFiddle : http://jsfiddle.net/p32ufmza/

출처

2014-09-26 20:04:39

CSS에 ":: before"가있는 버그 (?)

답변

관련 문제