CSS CSS3：在带有输入的伪元素之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4369868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 :after pseudo element with input
提问by user508605
Just playing with :beforeand :after.
只是玩:before和:after。
It seems I can't use them on/with an inputbutton? Thought I could potentially use it do display an asterisk for required fields. Not necessarily what I will do, just an option
似乎我不能在input按钮上/通过按钮使用它们？以为我可能会使用它确实为必填字段显示星号。不一定我会做什么，只是一个选择
input {
position: relative;
}
input:after {
content: '';
background: url(accept.png) 0 0 no-repeat;
height: 16px;
position: absolute;
right: -20px;
top: 5px;
width: 16px;
}
Same code works fine on an li
相同的代码在 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;
}
回答by Tim Medora
I've also thought that the same thing would be useful, but alas, the simplest way I have been able to get the before/after pseudo elements to work reliablyis by wrapping the input in a SPANtag and applying a class to that.
我也认为同样的事情会很有用，但唉，我能够让 before/after 伪元素可靠地工作的最简单方法是将输入包装在一个SPAN标签中并应用一个类。
This discussion provides some insight as to why input:afterdoesn't work:
http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a
这个讨论提供了一些关于为什么input:after不起作用的见解：http:
//forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a
You can do something like:
您可以执行以下操作：
.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>
回答by jinglesthula
An essentially identical question has been asked here that has a great explanation: https://stackoverflow.com/a/4660434/749227
这里提出了一个基本相同的问题，有很好的解释：https: //stackoverflow.com/a/4660434/749227
To summarize, inputs are not containers and cannot have children. The content inserted by the :before and :after pseudo-elements normally can't therefore be inserted into inputs.
总而言之，输入不是容器，不能有孩子。因此，由 :before 和 :after 伪元素插入的内容通常不能插入到输入中。
Note that rather than using <input type="submit|button">you can use <button>which can have children, so for that input there's a 'workaround' (well, if you have control over the markup ;)
请注意，<input type="submit|button">您可以使用<button>which 可以有孩子，而不是使用，因此对于该输入有一个“解决方法”（好吧，如果您可以控制标记；）
回答by aliceraunsbaek
I just looked into the same thing - only I wanted to use it to display accesskeys:
我只是研究了同样的事情 - 只有我想用它来显示访问键：
*[accesskey]:after {
content:' [' attr(accesskey) ']';
}
Not so keen on having to write the accesskey value more than one place cause that usually adds the risk of not keeping the values the same and that would be terible UE-wise =0/
不太热衷于将访问密钥值写入不止一个地方，因为这通常会增加不保持值相同的风险，这将是糟糕的 UE-wise =0/
回答by David says reinstate Monica
This answer (the text below the line) doesn't work(for text-based inputs anyway), but it's being left in situ on the off-chance it saves someone else the bother of trying to achieve the same end-result by the same means. The only way to do this is, as @Tim notes, in his answer, to wrap the input(or other) elements in another element, such as a span, and then style thatwith the :afterpseudo-element.
这个答案（该行下方的文本）不起作用（input无论如何对于基于文本的s），但它被留在原地，以防万一它节省了其他人试图实现相同最终结果的麻烦同样的意思。要做到这一点的唯一方法是，为@Tim笔记，在他的回答，来包装input在另一个元素（或其他方式）的元素，比如span，然后风格是与:after伪元素。
JS Fiddle demo of a working example.
Um, they seem to work quite okay JS Fiddle demo, except that, without the position: absolutethe :aftercontent appears within the element itself (inside the buttons, or checkboxes and so on).
嗯，他们似乎工作相当好了JS提琴演示，不同之处在于，如果没有position: absolute的:after元素本身（的按钮，或复选框内等）中的内容出现。
html:
html：
<button class="req">button</button>
<input class="req" type="text" />
<input class="req" type="radio" />
<input class="req" type="checkbox" />
<textarea class="req"></textarea>
css:
css：
input,
textarea {
display: block;
}
.req {
position: relative;
}
.req:after {
content: "*";
margin: 0 0 0 0.5em;
position: absolute;
top: 0;
right: -1em;
}
回答by Jennifer Michelle
I needed to do this with inputs, but did not have access to change the html, which was generated by Wordpress and Jquery. Well, maybe I could but it would have been a long workaround. Same reason: accessibility.
我需要使用输入来执行此操作，但无权更改由 Wordpress 和 Jquery 生成的 html。好吧，也许我可以，但这将是一个很长的解决方法。相同的原因：可访问性。
So, one possible fix you can use:
因此，您可以使用一种可能的修复方法：
#comment-form input[type=text],
#comment-form input[type=email],
#comment-form input[type=url],
#comment-form input[type=password] {
width:40%; margin-right:60%; }
If the error message comes after, it can no longer fit on same line & gets bumped. Of course you'd need to consider whether you can support percentage widths in your layout, but you get the idea.
如果错误消息出现在后面，它就不能再放在同一条线上并被撞到了。当然，您需要考虑是否可以在布局中支持百分比宽度，但您明白了。
