CSS3：伪元素后输入

参见英文答案 > Can I use the :after pseudo-element on an input field?17
刚刚玩：之前和之后.

看来我不能用/输入按钮使用它们？想到我可以使用它会为必填字段显示一个星号.不一定我会做,只是一个选择

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

相同的代码在li上正常工作

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}

解决方法

我也认为同样的事情是有用的,但唉,最简单的方法是使之前/之后的伪元素可靠地工作,是将输入包装在一个SPAN标签中并应用一个类.

这个讨论提供了一些洞察为什么输入：以后不工作：
http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

你可以这样做：

.required:after {
    content: "required";
    color: orange;
    margin-left: 1em; /* space between the input element and the text */
    padding: .1em;
    background-color: #fff;
    font-size: .8em;
    border: .1em solid orange;
}

<span class="required"><input id="foo" /></span>