:after 伪元素在 FF 中工作，但不是 Safari 或 Chrome答案

【问题标题】：:after pseudo-element working in FF, but not Safari or Chrome:after 伪元素在 FF 中工作，但不是 Safari 或 Chrome
【发布时间】：2011-10-25 23:59:46
【问题描述】：

我正在尝试将 :after 伪类添加到 Joomla 中的 .readmore 类中。

.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 似乎完全忽略了 :after 元素。

编辑：我发现它与.readmore 的display: 有关。如果我将.readmore 和:after 伪设置为:block，它可以在Safari/Chrome 中工作，但是.readmore 是在它自己的行上（显然），我真的很喜欢它排队。如果我将它设置为:inline 或:inline-block，它将停止在 Safari/Chrome 中工作（但 FF 似乎并不在意......它呈现 :after 伪 - 无论如何 - 作为水平线跨列延伸）。关于 FF/Safari/Chrome 如何以不同方式呈现块元素的任何提示/建议或资源？

如果这令人困惑，我会截取一些屏幕截图并稍后发布。

【问题讨论】：

您的内容声明中没有 ...more，但它在 Chrome 中对我有用 - jsfiddle.net/ncYmC
哦，...more 在其他地方声明，在语言文件中。 :after 元素只应该是一行（我想代表
）。

标签： css joomla pseudo-element

【解决方案1】：

如果我理解正确的话，你想达到如下效果：

有一些文本，然后在它的末尾有 iniline «more...» 文本，然后在新行上有一个块级元素，使灰色条纹。

不带 :after: 的示例代码

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...
-----------------------------

如果我是正确的，那么它可能是 Firefox 的错误，而不是 Chrome/Safari。

:before 和 :after 伪类没有在它们应用的标签之后添加元素，它们在其内容之前和之后添加一个。

所以上面的例子会呈现为：

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

所有问题都从这里开始：不能在行内元素中插入块级元素，否则浏览器将不知道如何呈现它。

如果它是一个普通标签，那么浏览器会尝试修复它。例如，如果您在 p 标记内插入 div 标记，如下所示：

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

然后尝试使用 Firebug 查看 DOM，您会看到浏览器关闭了错过的（如它所想的）标签并将代码呈现为：

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

Firefox 可能对 :after 元素做同样的事情——关闭 div 然后在同一级别添加新元素。但是 Safari 和 Chrome 试图在原始类中渲染它并失败了。

所以如果你想让它工作，你最好将 :after 附加到文本 sn-p 的父类，而不是 «more...» 元素。像这样：

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

.parent:after { your_code_here }

【讨论】：

【解决方案2】：

这不是更好地实现为模板覆盖吗？

复制 /component/com_contentviews//category/blog_item.php 文件（完全从内存中 - 可能有些错误但主体成立）到 /templates/yourtemplate/com_content/category/blog_item.php，并编辑 php/ html 来做你需要的。

【讨论】：