Question

我需要使用CSS input在content标记之前和之后显示一些文字。

使用以下代码，我无法在input代码上获得所需的效果，但可以正常使用a代码。

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

<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

这不是因为input标签本身没有任何内容。

input元素是一种称为 replaced elements 的特殊类型，它们不支持:psuedo选择器，因为它们不在CSS的范围内。

在CSS中，替换元素是一个元素，其表示形式为超出CSS的范围。这些是外部物体表示独立于CSS。典型的替换元素是<img>，<object>，<video>或表单元素<textarea> 和<input>。某些元素，例如或<canvas>被替换仅在特定情况下的元素。使用CSS插入的对象内容属性是匿名替换元素。

请注意，这甚至被称为in the spec

此规范未完全定义:before的互动和:after替换元素（例如HTML中的IMG）。

Answer 2

它不会在使用:: befoer＆amp;之前或之后插入内容::之后因为输入标记中没有内容。阅读类似的帖子here

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

2 个答案: