Question

如果您在此链接中查看表单，则会看到必填字段在CSS中为class="required"，在标记中为*。

标记中显示的*是否可以完全使用CSS添加到具有此类的div？

Answer 1

您可以使用after伪类：

.required:after { content: "*"; }

或者，因为您明确要求使用该类的div：

div.required:after { content: "*"; }

应该可以工作（仅限IE以来的IE）

当然，您可以对此应用任何样式。你甚至可以做这样的事情：

div.required:after:hover { /* Hello, I'm a geek. */ }

这也可以通过JavaScript实现。 jQuery的：

$(".required").append("*");

Answer 2

span:after { content:"*"; }

演示： http://jsfiddle.net/W3gHU/

Answer 3

您可以使用:after或before css伪元素，更多信息，以及哪些浏览器支持here。

Answer 4

尝试此页：

<html>

<style>
.required:after {
    color: red;
    content: "*"
}
</style>

<body>

<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">

</body>

</html>

：可能除了IE之外的所有东西都被理解（希望IE9会有支持）

考虑到ŠimeVidas的评论，

更新：这只是使用的一个例子。当然，如果我们这样做会带来更多的意义：

.required:before {
    color: red;
    content: "*"
}
....
<div>Name <input type="text" class="required"> </div>

然后我们甚至可以在该字段中添加不显眼的javascript验证（因此这种方式带来了很好的优势）。问题是这个重构的页面将显示为我们只想在Opera中显示（我在所有最后版本的浏览器上检查过它，除了FireFox 4，但我不确定FF会改变他们将这种风格考虑在内的方式））。
：after和：之前不用于输入和img元素; there is相关讨论原因。来自jQuery的$（“。required”）。before（“*”）然而无处不在，但更多的是关于JavaScript然后是CSS（以前被其他人提到过）。

Answer 5

您可以通过CSS添加星形图像。这应该适用于所有浏览器。

.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}

CSS可以自动添加文字吗？

5 个答案: