: FF에서 유사 요소가 작동하지만 Safari 또는 Chrome에서는 작동하지 않습니다.

Question

Joomla .readmore 클래스에 pseudo-class를 추가하려고합니다.

.readmore 
{ 
    font-size:12px; 
    margin-bottom:2px; 
    color:#000 !important; 
    font-weight:bold; 
    display:inline; 
} 

.readmore:after 
{ 
    content:""; 
    display:block; 
    width: 215px; 
    height: 3px; 
    border-bottom: 1px solid #CCC; 
    margin:3px 0 3px 0; 
} 

Firefox에서는 완벽하게 작동합니다. 기사 소개 뒤에는 "... more"링크가 있고 그 다음에 줄이오고 그 다음 인트로가옵니다. Safari와 Chrome은 the : after 요소를 완전히 무시한 것처럼 보입니다.

편집 : 나는 display:이 .readmore 인 것과 관련이 있다는 것을 알아 냈습니다. .readmore 및 :after이 모두 :block으로 설정되었지만 .readmore이 고유 한 행 (분명히) 인 경우 Safari/Chrome에서 작동하며 실제로 인라인이어야합니다. :inline 또는 :inline-block으로 설정하면 Safari/Chrome에서 작동을 멈 춥니 다. (하지만 FF는 상관하지 않습니다 ... :after은 무엇이든 상관없이 유사합니다 - 가로줄이 수평선으로 뻗어 있음) . FF/Safari/Chrome에서 차단 요소를 다르게 렌더링하는 방법에 대한 도움말이나 조언 또는 자료

혼란 스러울 경우 일부 스크린 샷을 찍어 나중에 게시하겠습니다.

일부 텍스트가있다

, 다음 iniline이는 새 줄에 다음 끝, 그리고에서«더 ...»텍스트가있다 : 만약 내가 제대로 이해하고

Answer 1

, 당신은 다음과 같은 효과를 달성하고자하는 회색 줄무늬를 만드는 블럭 레벨 요소. 후 :

This is the example text that we want to show <div>more...</div> 
<div class="line"></div> 

과 같이 렌더링 수 :없이이

예제 코드

This is the example text that 
we want to show more... 
----------------------------- 

내가 정확 해요면, 아마 파이어 폭스 버그, 그리고 크롬/사파리입니다.

: and : after 가상 클래스가 적용된 태그 다음에 요소를 추가하지 않은 이전에는 해당 태그는 내용 앞뒤에 하나를 추가합니다.

This is the example text that we want to show <div>more...<div class="line"></div></div> 

그리고 여기에서

모든 문제가 있습니다 : 당신은 인라인 요소 내부 블록 레벨 요소를 삽입 할 수 없습니다, 또는 브라우저를 렌더링하는 방법을 알 수 없습니다로

그래서 위의 예 렌더링됩니다.

정상적인 태그 인 경우 브라우저는이를 복구하려고합니다. (이 생각하는) 당신이 브라우저가 놓친 폐쇄 태그와 렌더링 코드를 볼 수 방화범이 끌려와 DOM보고 다음 시도

<p>1<div>2</div>3</p> 

을 그리고 예를 들어이 같은 사업부 태그 페이지 내부 태그를 삽입하는 경우 로 :

<p>1</p> 
<div>2</div> 
<p>3</p> 

파이어 폭스 아마와 같은 일을 수행 요소 뒤에 - DIV을 폐쇄 한 후 동일한 수준에 새로운 요소를 추가했다. 하지만 사파리와 크롬은 원본 클래스 내부에서 렌더링하려고 시도했지만 실패했습니다.

그래서 작동 시키려면 텍스트 스 니펫의 상위 클래스에 후를 연결하고 더 많은 요소는 첨부하지 않는 것이 좋습니다. 좋아요 :

<div class="parent"> 
    This is the example text that we want to show <div>more...</div> 
</div> 

.parent:after { your_code_here } 

Answer 2

서식 파일 재정의로 더 잘 구현되지 않습니까?

/component/com_contentviews//category/blog_item.php 파일 (메모리에서 전체 - 다소 틀리지 만 교장이 틀림)을 /templates/yourtemplate/com_content/category/blog_item.php에 복사하고 PHP를 편집하십시오/html 당신이 필요로하는 것을하십시오.