问题标签 [css-content]

我怎样才能得到这个效果：

我需要使用数据标签作为标题：

这就是结果。问题是当你滚动时，:before元素也会滚动。有没有办法保持这个元素固定。我尝试了不同的变化，但我无法让它工作。

谢谢

这是我不太了解的关于 z-index 和 css 伪元素 ::before / ::after 的行为。

在这个 jsfiddle 上有说明：http: //jsfiddle.net/jgoyon/T6QCf/

我创建了一个定位框并使用 ::after 伪元素（也定位）添加了内容。

• 如果我将 z-index 设置为 ::after 伪元素，一切正常，我可以通过使用 z-index 将其定位在父元素之上或之下

• 如果我做同样的事情并设置父级的 z-index，它就不再起作用了。

这是预期的行为吗？

HTML：

CSS：

现场演示： http: //jsfiddle.net/SPHzj/13/（适用于 Firefox 和 Chrome）

如您所见，我::after在段落的伪元素上设置了 CSS 过渡。然后，当段落悬停时，两种新样式适用于过渡的伪元素。

这适用于 Firefox 和 Chrome，但不适用于 IE10。我的理由是 IE 不理解p:hover::after选择器，因为如果您将悬停设置在祖先元素上，它可以在 IE 中工作，例如div:hover p::after- 现场演示：http: //jsfiddle.net/SPHzj/14/。

然而，事实并非如此，因为 IE 确实能够理解该选择器。诀窍是也定义一个p:hover {}规则。（由@maxw3st发现。）

此规则可以为空。仅此规则的存在将使 IE10 中的转换工作。

现场演示： http: //jsfiddle.net/SPHzj/15/（也适用于 IE10）

这里发生了什么？为什么 IE 要求存在该规则才能使过渡对伪元素起作用？这应该被认为是一个错误吗？

我想以正确的方式在 CSS 伪类的“内容”中动态生成文本。到目前为止，我已经用我的例子填充了一个工作 jsfiddle 。这张图片更好地展示了我想如何实现这一点：

这是相关的代码（它也在小提琴中）：

[部分] index.php：

[部分] style.css：

我希望能够出于两个目的重用该代码：

1. 用 PHP 动态地和内部地翻译它。
2. 具有相似样式的不同按钮。

这意味着，我希望能够创建一个类似但名称不同的按钮，或者只是翻译它而不需要额外的标记。我不知道如何正确地做到这一点。原因如下：

• CSS 位于一个独特的 .css 文件中，与内容分开。显然，这不会执行 php.ini。
• 内联样式中不可能有 CSS 伪元素
• 没有 JavaScript。虽然这可以通过 javascript 实现，但我更愿意尽可能避免使用它。

我怎样才能实现它？我觉得很奇怪我需要使用 CSS

我试图为访问的链接添加一些效果，然后我遇到了这个问题。

这是代码：http ://dabblet.com/gist/5447894

只有 Opera 才能成功更改:before伪元素的内容。所有其他浏览器都失败。我错过了什么吗？谢谢

我需要在课后设置一个 url module-content，使用纯 css。这段代码不起作用，但基本上我需要Custom‌·Link在content: ' ' attr(href);.

不成功的 Jquery尝试：

我正在为附加组件“时尚”制作用户样式表。

它在整个页面上应用了一个半透明的黑框以进行夜间浏览。

我在用着：

创建固定的覆盖 div。

这很好用，但是，如果站点中有任何 iframe，它将将此代码应用到 iframe 的 HTML 中，您可以在此处看到：

因为这些社交网络小部件依赖于 IFRAME，它将代码重复到这些页面中，从而创建了我制作的半透明暗盒的双重叠加。

所需的外观是：

我已经尝试过 hack-ish 的东西，比如对 iframe 应用更高的 z-index 并将 iframe 中任何内容的背景颜色和背景指定为“白色”和“不透明”，以便它“浮动”父 html 页面的顶部，但这并不完美。我也尝试过类似的东西：

但这也行不通。我想知道是否有办法以不依赖 'html:before' 来创建相同效果的方式来做我想做的事情，或者是否有办法做到这一点但没有它在页面上的 iframe 的 html 中重复。

我已经竭尽全力试图让它发挥作用，所以任何帮助都将不胜感激。谢谢你。

我正在尝试在不使用 JavaScript 或 JQuery 的情况下设计表单。它包括一系列复选框。这个想法是如果未选中复选框，则在复选框之后显示某个 gif。否则，在它之后不显示任何内容。这是我的代码：

它适用于 Chrome，但似乎不适用于 Firefox 或 IE。怎么了？

数据属性中是否可以有一个新行？

我正在尝试做这样的事情：

CSS：

HTML

我发现 "\a" 是 CSS 中的一个新行，但仍然对我不起作用。

以下代码均无效：

如何在元素内容之前添加空格？

注意：我需要为左边框和左边框着色以供语义使用，并将空格用作无色边距。:)