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>

これは有効ではありません。

specを見て理解を深めてください (ブラウザがどのように解釈するかについての例があります)。

于 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 に答える