【问题标题】：CSS content attr() not workingCSS 内容 attr() 不起作用
【发布时间】：2014-02-26 10:53:37
【问题描述】：

我正在尝试使用 css 制作一种简单的工具提示类型的输入占位符。但是今天事情不会像我预期的那样发展。

#formulier input:focus::-webkit-input-placeholder:after { 内容：attr（tip）“测试”； /**/ 位置：绝对；对：0；显示：内联块；红色; }

“测试”的内容输出工作正常，但我无法获得 attr(tip).. 请查看我在此处创建的小演示（仅限 Chrome 和 SAFARI 使用 WEBKIT）

edit

提前感谢您帮助我：D

【问题讨论】：

您确定content:"foo"; 有效吗？ content 根本不应该与 input 元素一起使用。
没关系，我看到你正在使用它与::-webkit-input-placeholder:after。看起来您在这里面临同样的问题：stackoverflow.com/questions/18162649/… 尽管这是针对不同的伪元素。不确定它是否算作重复，否则我可以在这里重现我的答案。
很抱歉忘记说明该演示仅适用于 chrome 和 safari 浏览器。由于那里有-webkit的东西......
好吧，您应该在此处粘贴整个 CSS 规则，以便清楚地表明您正在使用具有 content 属性的 WebKit 功能。
我认为问题在于范围。我认为在 css 触发时，它并没有在输入上触发，它正在为没有任何关联属性的占位符触发。

【解决方案1】：

您将不得不用一个跨度来包装这些输入字段。在 CSS 中拉取的内容是在选择器的内容之后拉取的，在这种情况下 - 输入 - 不包含内容，因此使用 content:'';输入无效。使用标签或在输入字段周围放置一个跨度

【讨论】：