Css ：在FF中工作的伪元素之后，但不是Safari或Chrome

我试图在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似乎完全忽略了：after元素

编辑：我发现它与

.readmore

的

显示：

有关。如果我同时拥有

.readmore

和

:after

伪设置为

:block

，那么它在Safari/Chrome中工作，但是

.readmore

是独立的（显然），我真的希望它是内联的。如果我将其设置为

：inline

或

：inline block

，它将停止在Safari/Chrome中工作（但FF似乎并不在意…它将

：after

伪化-无论怎样都是一样的-作为一条横穿列的水平线）。关于FF/Safari/Chrome如何以不同方式渲染块元素，有什么提示/建议或参考资料吗

---

如果这让人困惑，我将截图并稍后发布。

如果我理解正确，您希望实现以下效果：

有一些文本，然后在其末尾有一行«更多…»文本，然后在新行上有一个块级元素，该元素生成灰色条纹

示例代码不带：after:

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

如果我是对的，那可能是Firefox的bug，而不是Chrome/Safari

：before和：after伪类没有在应用到的标记之后添加元素，而是在其内容之前和之后添加一个元素

因此，上面的示例将呈现为：

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

这是我们想展示更多的示例文本。。。

从这里可以看出所有的问题：不能在内联元素中插入块级元素，否则浏览器将不知道如何渲染它

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

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

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

123

然后尝试使用Firebug查看DOM，您将看到浏览器关闭了丢失的（正如它所认为的）标记，并将代码呈现为：

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

1

2.
三,

Firefox可能在元素之后做同样的事情：关闭div，然后在同一级别添加新元素。但是Safari和Chrome试图在原始类中呈现它，但失败了

因此，如果您想让它正常工作，最好将：after附加到文本片段的父类，而不是«more…»元素。像这样：

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

.parent:after { your_code_here }

这是我们想展示更多的示例文本。。。
.parent:在{你的代码在这里}之后

作为模板覆盖，这不是更好的实现方式吗

---

将/component/com_contentviews//category/blog_item.php文件（完全从内存中复制-很可能有点错误，但主体保留）复制到/templates/yourtemplate/com_content/category/blog_item.php，然后编辑php/html以执行所需操作

您的内容声明中没有

…more

，但它在Chrome中对我有效-哦，

…more

在其他地方声明，在一个语言文件中。：after元素只应该是行（我想是代表

---

）。