:after 伪元素在 FF 中工作，但在 Safari 或 Chrome 中不起作用

发布于 2024-12-11 19:05:32 字数 883 浏览 0 评论 0原文

我正在尝试向 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 的 display: 有关。如果我同时拥有 .readmore 并且它的 :after 伪设置为 :block，那么它可以在 Safari/Chrome 中工作，但随后 .readmore 位于其自己的行上（显然），我真的希望它是内联的。如果我将其设置为 :inline 或 :inline-block，它会在 Safari/Chrome 中停止工作（但 FF 似乎并不关心...它会渲染 < code>:after 伪-无论如何都是一样的-作为延伸穿过列的水平线）。关于 FF/Safari/Chrome 如何以不同方式渲染块元素的任何提示/建议或资源？

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

原文

I'm trying to add an :after pseudo-class to the .readmore class in Joomla.

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

In Firefox, it works perfectly; after the article intro, there's a "...more" link, followed by a line, then the next intro. Safari and Chrome seem to be ignoring the :after element completely.

Edit: I've figured out that it has something to do with the display: of .readmore. It works in Safari/Chrome if I have both .readmore and it's :after pseudo- set to :block, but then the .readmore is on its own line (obviously), and I'd really like it to be inline. If I set it to :inline or :inline-block, it stops working in Safari/Chrome (but FF doesn't seem to care... it renders the :after pseudo- the same no matter what - as a horizontal line that extends across the column). Any tips/advice or resources on how FF/Safari/Chrome render block elements differently?

If this is confusing I'll take some screenshots and post later.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青巷忧颜 2024-12-18 19:05:32

如果我理解正确的话，您想要实现以下效果：

有一些文本，然后在其末尾有内联“更多...”文本，然后在新行上有一个块级元素，该元素会形成灰色条纹。

没有 :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 附加到文本片段的父类，而不是“more...”元素。像这样：

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

.parent:after { your_code_here }

If I understand correctly, you want to achieve the following effect:

There is some text, then there is iniline «more...» text at it's end, and then on the new line there is an block-level element that makes gray stripe.

Example code without :after:

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

May render like this:

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

If I'm correct, then it's probably Firefox bug, and not the Chrome/Safari.

:before and :after pseudo-classes didn't add element after the tag they applied to, they add one before and after it's contents.

So the example above will render as:

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

And from here are all the problems: You can't insert block level element inside inline element, or browser will not know how to render it.

If it was a normal tag, then browsers would try to repair it. For example if you insert div tag inside p tag like this:

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

And then try to look at the DOM with Firebug you will see that browser closed missed (as it thinks) tags and rendered code as:

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

Firefox probably do the same thing with :after element — closed the div and then added new element on the same level. But Safari and Chrome tried to render it inside the original class and failed.

So if you want to make it to work, you better attach :after to the parent class of the text snippet, and not to «more...» element. Like this:

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

.parent:after { your_code_here }

回复收藏 0 原文

◇流星雨 2024-12-18 19:05:32

作为模板覆盖来实现不是更好吗？

将 /component/com_contentviews//category/blog_item.php 文件（完全从内存中 - 可能有点错误，但原理成立）复制到 /templates/yourtemplate/com_content/category/blog_item.php，然后编辑 php/html 来执行以下操作你需要什么。

回复收藏 0 原文

~没有更多了~