5

我不认为我很理解:before，:after因为我无法让这个工作。我只是想在表单中的必填字段后添加一个星号。

我的代码很简单：

<input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" />

/* Required field */
.required:after {
  content: '*';
  color: #EF5F5F;
}

为什么这不起作用？
我的小提琴在这里：http: //jsfiddle.net/3EFTN/

4

3 回答 3

6

生成的内容作为您要添加到的项目的子项添加。所以浏览器正在这样做（为简洁起见跳过了一些属性）：

<input class="required">
  <span class="after">*</span>
</input>

这是无效的。

查看规范以更好地理解它（它有关于浏览器如何解释它的示例）。

于 2013-03-31T11:35:36.510 回答
1

:after和:before选择器不适合用于表单元素，例如input，因此使用 CSS 是不可能的。我建议为此使用 jQuery 或<span>在元素之后添加另一个。

于 2013-03-31T11:27:58.363 回答
1

您的 css 试图在<input>元素内添加 * ，这是不可能的，因为它不能包含任何其他元素。

让我们这样说：:after意味着您的内容将被插入到您的选择器的末尾，:before这意味着您的内容将被插入到您的元素的开头。

你可以在这里找到一个很好的解释：http: //coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

于 2013-03-31T11:33:42.897 回答