问题标签 [pseudo-element]

我有一个只有两个元素的 wordpress 列表，我想在此类列表的第一个元素之后添加一个简单的字符，例如“-”。是否可以使用css中的伪元素来做到这一点？

我需要告诉我的 css 是在我的列表的 :first-child 之后添加一些东西 :after 。

这是可能吗？

提前致谢！

亚历克斯

http://jsfiddle.net/nicktheandroid/k93ZK/2/

这应该很简单，我只是不明白为什么它不起作用。将鼠标悬停在:before它应该将其不透明度更改为 1，但事实并非如此。为什么？

编辑：我正在使用 Chrome。

我无法理解 CSS:after属性的行为。根据规范（此处和此处）：

正如它们的名字所表明的，the:before和:after伪元素指定了一个元素的文档树内容之前和之后的内容位置。

这似乎没有限制哪些元素可以具有:after（或:before）属性。但是，它似乎只适用于特定元素......<p>有效，<img>无效，<input>无效，有效<table>。我可以测试更多，但重点是。请注意，这在浏览器中似乎非常一致。什么决定了一个对象是否可以接受一个:before和:after属性？

使用创建的阴影:before并:after位于 parent 之下div。我该如何解决？父母的影子div工作正常。

CSS：

HTML：

对于我的移动桌面导航栏，我有背景按钮（默认）。在顶部，我使用 :after 插入一个具有背景（纯灰色）的元素，该元素在悬停时变为（lt. blue）和内容（url（image.alpha-png））或-webkit-mask-image。

我正在寻找一种在不支持 :after 或无法处理 -webkit-mask-image 的浏览器/设备上不显示任何内容（=默认背景图像）的方法。

我通过删除后备背景颜色（照顾 IE 7,8）让它适用于伪类，现在我正在寻找一个不在浏览器/设备上不显示灰色/蓝色背景的方法支持-webkit-mask-image（或它们不工作的-o/-ms/-moz-equivalents）

这是一些代码：

HTML：

CSS（我为所有其他浏览器保留了渐变和蒙版 CSS）：

由于 -webkit 是唯一提供图像掩码的供应商，我正在寻求以下帮助：

• 在非 webkit 设备上隐藏背景渐变
• 提供一些关于 FF、Opera 的好选择的信息...
• 关于为 alpha-png 切换图像掩码是否有意义的意见，这意味着必须为我的 CSS-sprite 创建一个“负面”

感谢帮助！

伪元素 a:after a:before 允许您添加看起来是链接一部分的文本。但是，我似乎无法找到一种方法使该部分作为链接的一部分可点击。

例如，下面的 css 之后显示了 url：

...但它不会是可点击的。

任何人都可以在不更改底层 HTML 的情况下解决这个问题？

编辑：我使用的是 chrome 13.0.782.107。事实证明这是一个错误。（谢谢肖恩）

我试图给一个“卡片”元素一个看起来像是从页面上抬起的阴影。我正在使用 ::after 伪元素、css 转换和框阴影来执行此操作。

我正在使用 Mac OSX、Chrome（最新版本）和 Firefox 5。结果是

可以看到，firefox 渲染中有一个奇怪的类似边框的神器。它的颜色似乎与正文背景颜色有关 - 正如您在第二个 firefox 示例中所见。

为此，我有以下代码：

HTML：

CSS：

周围还有一些 CSS，但我很确定我已经玩了足够多的东西来排除其他任何东西。

任何想法为什么会发生这种情况，如果它是特定于平台/浏览器的，和/或任何修复？谢谢你的帮助！

在这个 MS 兼容性表上，它说， IE9不支持伪元素::before和::after

难道我做错了什么？我认为::before并且::after会是从 IE9 隐藏内容的好工具，而事实上，它们并没有。

我有这个 HTML：

这个CSS：

我希望伪元素完全覆盖原始元素（其中包含 50% 的 IE7,8 渐变 - 因此高度：50%，边距底部：50%；）

但是在 IE9 中... ::after 元素仅覆盖 50%，尽管我特意将高度设置为 44px。这是因为使用了过滤器吗？知道如何覆盖它吗？

这是示例的JSBin。

感谢帮助。

更新

这是整个事情的一个例子：

例子

笔记：

• 查看 background.css 文件中的注释
• 我无法更改元素结构或将渐变分配给 .ui-icon 以外的任何其他元素
• 渐变应覆盖页脚的 50%。页脚为 44 像素，因此渐变在 22 像素处停止
• IE7+8 无法做到这一点（或颜色停止），所以我将 .ui-icon 高度设置为 22px 加上 filter-gradient
• 使用 ::before 我为 .ui-icon 顶部的所有其他浏览器添加渐变

问题 1 = IE9+ 渲染 ::before - 我使用 z-index:-1，所以 .ui-icon 位于 ::before = OK

问题 2 = 在 IE9+ 上 ::before 背景被 .ui-icon 切断。

问题：如何避免 ::before 中的渐变？

是否可以动态设置伪元素的 CSS？例如：

jQuery 动态样式化帮助容器

jQuery 尝试设置帮助容器的内边框：

上面的 CSS 文件