代码之家 › 专栏 › 技术社区 › James A. Rosen

哪些元素支持::before和::after伪元素?

pseudo-element forms css html

20

James A. Rosen · 技术社区 · 15 年前

我正在尝试设计一些好的默认样式 <input> 在HTML5中尝试了以下操作:

input::after         { display: inline; }
input:valid::after   { content: ' â '; color: #ddf0dd; }
input:invalid::after { content: ' â '; color: #f0dddd; }

唉, ::after 内容永远不会出现。伪元素的双冒号和单冒号不是问题,我试过两种方法。拥有一个伪元素和一个伪类也不是问题;我尝试过没有 :valid 和 :invalid . 我在Chrome、Safari和火狐中也有同样的行为(火狐没有 有效的 和 无效 伪类,但我没有那些尝试过。)

伪元素的作用很好 <div> , <span> , <p> 和 <q> 元素——其中一些是块元素,一些是内联的。

所以,我的问题是:为什么浏览器同意 <输入& GT; 没有一个 后: ?我找不到任何说明这一点的规范。

3 回复 | 直到 7 年前

1

28

BoltClock 12 年前

你可以在这里读到 http://www.w3.org/TR/CSS21/generate.html ,:after仅用于具有(文档树)内容的元素。 <input> 没有内容,以及 <img> 或 <br> .

2

6

cobberboy 7 年前

可以在元素之前或之后放置跨度。例如。:

<style>
  #firstName:invalid+span:before {
    content: "** Not OK **";
    color: red;
  }
  
  #firstName:valid+span:before {
    content: "** OK **";
    color: green;
  }
</style>

<input type="text" 
    name="firstName" 
    id="firstName" 
    placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John )" 
/><span>&nbsp;</span>

3

5

Andrew Philpott 14 年前

WebKit允许您在输入元素之后执行::。如果您想让它在Firefox中工作,可以尝试在输入的标签上使用::after,而不是输入本身。