Question

我正在尝试将一个伪后类添加到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元素。

编辑：我发现它与display:的{{1}}有关。它适用于Safari / Chrome，如果我同时将.readmore和.readmore伪设置为:after，那么:block就在它自己的行上（显然），并且我真的很喜欢它是内联的。如果我将其设置为.readmore或:inline，它将停止在Safari / Chrome中运行（但FF似乎并不关心......它会使:inline-block伪 - 无论如何什么 - 作为横跨列延伸的水平线）。有关FF / Safari / Chrome如何以不同方式呈现块元素的任何提示/建议或资源？

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

Answer 1

如果我理解正确，您希望达到以下效果：

有一些文本，然后在它的末尾有“更多...”文本，然后在新行上有一个块级元素，它会产生灰色条纹。

示例代码没有：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的bug，而不是Chrome / Safari。

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

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

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可能会做同样的事情：在元素之后 - 关闭 div ，然后在同一级别添加新元素。但Safari和Chrome试图将其渲染到原始类中并失败。

因此，如果你想让它工作，你最好附上：在文本片段的父类之后，而不是«more ...»元素。像这样：

<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做你需要的。

：在FF中使用伪元素后，但不是Safari或Chrome

2 个答案: