다음을 표시하는 방법 : 요소 외부 내용 뒤에

다음 경우에 :after에 의해 생성 된 텍스트가 범위 상자 밖에 있도록 어떻게 만들 수 있습니까? (가 span 요소 넓은하게 즉, 그것은 현재, 내부 렌더링)다음을 표시하는 방법 : 요소 외부 내용 뒤에

HTML

<span class="my">Boxtext</span>

CSS

span.my { 
    padding:   4px 8px; 
    background-color: red; 
    display:   inline-block; 
    border-radius:  10px; 
    margin-left:  20px; 
    } 
span.my:after { 
    content:   " text that is supposed to come after the box"; 
    }

나는이 목록 스타일 위치하는 곳에 당신에게 다소 비슷한 것 같다 안쪽이나 바깥 쪽을 선택할 수 있습니다 ...

출처

2012-04-09 Ben

CSS 콘텐츠는 렌더링 된 개체의 일부로 간주됩니다. 당신은 :after이 :append으로 명명되어야한다는 주장을 할 수 있습니다.

<span class="my"><span>Boxtext</span></span> 
span.my span { ... } 
span.my:after { ... }

또는 구체적 내용을 스타일링 :

귀하의 경우를 들어 당신은 span.my 내부에 추가 요소를 넣어 시도 할 수 있습니다.

span.my:after { 
    content:   " text that is supposed to come after the box"; 
    background-color: white; 
    position:   absolute; 
    margin-left:  10px; 
}

출처

2012-04-09 18:00:13 Joel

Thx하지만 두 번째 해결 방법은 언급 한 것처럼 테두리 (-radius)로 인해 불쾌 해 보일 것입니다. 첫 번째 해결 방안에 대해서는 작동 하겠지만 원래 html로 작동하는 솔루션을 찾고있었습니다. – Ben

이 답변을 살펴본 후이 예제를 해킹했습니다. http://jsfiddle.net/cawgZ/ –

절대 위치 지정을 사용하면 두 번째 솔루션의 모양을 더 좋게 만들 수 있습니다. http://jsbin.com/ibuqip – Joel

그냥 ::after {} 의사 요소의 CSS에서 position: absolute를 사용

span.my:after { 
    content: " text that is supposed to come after the box"; 
    position: absolute; 
    left: 100%; 
}

부모 span.my 요소에 position: relative; (또는 다른 position 값)를 사용하는 물론, 기억하십시오.

JS Fiddle demo.

는 또한 ::after (과 ::before) 의사 요소는 범위에서 상속으로하는이 즉 명시 적으로 위해 CSS에서 재정의 될 필요가있다 그래서 /는 width 상속거야 '연결'것을 기억 그 요소들.

출처

2012-04-09 18:08:58

다른 해결책과 같은 문제 : http://jsfiddle.net/PMFst/1/ – Ben

,,, 그리고 그 문제는 ..? –

다음을 표시하는 방법 : 요소 외부 내용 뒤에

답변

관련 문제