Может ли CSS автоматически добавлять текст?

Если вы проверите форму по этой ссылке, вы увидите, что требуемые поля имеют class="required" в CSS и * в разметке.

http://drupal.org/user

Может ли *, отображаемый в разметке, полностью добавить CSS для div, которые имеют этот класс?

5 ответов

Вы можете использовать псевдо-класс after:

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

или, потому что вы явно попросили div с этим классом:

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

Должен работать (для IE только с IE8)

Вы можете применить любой стиль к этому, конечно. Вы можете даже делать такие вещи:

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

Это также может быть достигнуто с помощью JavaScript. JQuery:

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


Вы можете использовать псевдо-элемент :after или before css для этого, более подробную информацию, а также о том, какие браузеры поддерживают его здесь.


span:after { content:"*"; }

Демо:http://jsfiddle.net/W3gHU/


Попробуйте эту страницу:

<div>Name</div> 
<div>Email</div>

: после понимается, вероятно, все, кроме IE (надеюсь, IE9 будет иметь поддержку)

Обновить с учетом комментария Šime Vidas: это был просто пример использования. Конечно, это принесет больше смысла, если мы сделаем так:

.required:before {
 color: red;
 content: "*"
}
....
<div>Name  </div>

то мы можем даже добавить ненавязчивую проверку JavaScript в это поле (так что это дает хорошие преимущества). Проблема в том, что эта реорганизованная страница будет отображаться так, как мы хотим ее только в Opera (я проверил ее во всех последних сборках браузеров, кроме FireFox 4, но я не уверен, что FF изменит способ учета этого стиля). : after и: before не работают для элементов ввода и img; есть, связанное с тем, почему. $( ". required" ). before ( "*" ) из jQuery, однако, будет работать повсюду, но больше о JavaScript, затем CSS (и ранее упоминался другими людьми).


Вы можете добавить изображение звезды через CSS. Это должно работать во всех браузерах.

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

licensed under cc by-sa 3.0 with attribution.