：FFで擬似要素を処理した後、SafariやChromeを使用しないでください。

Question

Joomlaの.readmoreクラスに：after擬似クラスを追加しようとしています。

.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では、完全に機能します。記事の後ろには、「もっと見る」リンクがあり、その後に行が続き、次のイントロが続きます。 SafariとChromeはthe：after要素を完全に無視しているようです。

編集：私はそれがと関係があることを理解しました。 .readmoreと:afterが擬似:blockに設定されている場合はSafari/Chromeで動作しますが、.readmoreはそれ自身の行（明らかに）にあり、インラインにしたいと思っています。 :inlineまたは:inline-blockに設定すると、Safari/Chromeでの動作が停止します（ただし、FFは気にしないようです...列にまたがる水平線として、何でも同じである:after疑似をレンダリングします） 。 FF/Safari/Chromeがどのようにブロック要素をレンダリングするかについてのヒント/アドバイスやリソース

これが混乱している場合は、スクリーンショットを撮り、後で投稿します。

Answer 1

私が正しく理解していれば、あなたは次のような効果を達成したい：一部のテキストがあり

、その後、«よりは...»テキストそれで終わりinilineがありますされ、その後、新しい行にありグレーのストライプを作るブロックレベルの要素。

例コードなし：後：

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

私が正しいんだ場合、それはおそらくFirefoxのバグではなく、クローム/サファリです：

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

このようにレンダリング可能性があります。

：and：after擬似クラスは、適用されたタグの後ろに要素を追加しなかった前に、内容の前後に擬似クラスを追加します。

したがって、上記の例のようにレンダリングされます：

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

そして、ここからはすべての問題です：あなたは、インライン要素内ブロックレベル要素を挿入することはできません、またはブラウザがそれをレンダリングする方法を知ることができません。

通常のタグだった場合は、ブラウザが修復しようとします。

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

そして、あなたはタグやレンダリングコードを（それが思ったように）そのブラウザが見逃し閉じて表示されますFirebugのでDOMを見てみてください。たとえば次のようなPタグ内のdivタグを挿入した場合よう：

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

Firefoxのだろうと同じことを実行します。要素の後に - DIVを閉じた後、同じレベルに新しい要素を追加しました。しかし、SafariとChromeは元のクラスの内部でそれをレンダリングしようとしましたが失敗しました。

それを機能させたい場合は、後で「もっと...」要素ではなく、テキストスニペットの親クラスに後付けしてください。このように：

<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あなたが必要とすることをする。