html - 带有内容的 CSS 伪选择器在 html 输入标签上不起作用

Question

我需要使用 CSS content 在 input 标签前后显示一些文本。

使用下面的代码，我无法在 input 标签上获得预期的效果，但在 a 标签上效果很好。

我做错了什么？如何解决？

http://jsfiddle.net/pgdu2tue/1/

<input id="test" type="text" name="nametest">

<br>
<a id="moz" href="http://www.mozilla.org/">Mozilla Home Page</a>

#moz::before {
    content:"XXX" ;
}
#test::before {
    content:"BEFORE" ;
}
#test::after {
    content:"AFTER" ;
}

Answer 1

它不会在使用::before 或::after 之前或之后插入内容，因为输入标签中没有内容。阅读类似的帖子 here