Я думал, что это будет легко сделать с помощью псевдоэлемента ::first-letter, но это не работает!
У меня есть
<p>* Required Fields</p>
и я хочу, чтобы * был красным!
Любые идеи? Обратите внимание, что я не могу изменить html.
Как раскрасить первый символ звездочки в теге p
Ответы (1)
У меня почти есть решение (ну, вы можете рассматривать его как решение), и оно работает с вашим HTML:
p::before {
content:'*';
position:absolute;
color: red;
text-shadow: 0 0 1px red;
}
Я запустил виртуальную машину для тестирования в IE, она выглядит хорошо:
person
Denys Séguret
schedule
24.07.2013
Очень креативное решение. Вероятно, единственный возможный вариант — я только что просмотрел всю спецификацию уровня 4, которая содержит длинный список всех селекторов с уровней (1-4), что невозможно ни на одном из них. Может быть, в расширении когда-нибудь.
- person Benjamin Gruenbaum; 24.07.2013
@Neal Разница в том, что мое решение работает с OP HTML. Абсолютное позиционирование заставляло * рисоваться в той же позиции.
- person Denys Séguret; 24.07.2013
Я просто работал над тем, чтобы сделать то же самое с position: relative, но это лучше.
- person ; 24.07.2013
Мы все еще можем видеть черную звездочку под красной. У меня хром 28.
- person Brewal; 24.07.2013
Я работал над похожим риффом, используя скрытую видимость в :first-line и до/после, чтобы воссоздать строку. Элементы могут быть оформлены независимо друг от друга и должны решить проблему просвечивания в Chrome 28. jsfiddle.net/NkapN
- person Andrew Clody; 24.07.2013
@Brewal Следовательно, почти.
- person Denys Séguret; 24.07.2013
Мое решение также представляет собой довольно большой взлом, но, похоже, оно отображается одинаково в Firefox 22, Safari 6.0.4 и Chrome 28.0.1500.71. Извините, у меня нет IE, чтобы проверить.
- person Andrew Clody; 24.07.2013
Да, я тоже так понял, но ты этого не сказал :)
- person Brewal; 24.07.2013
@Benjamin: Если есть какие-либо изменения в спецификации Selectors, это будет
::first-letter, но я сомневаюсь, что они вообще изменятся. Если появится новый псевдоэлемент, он, вероятно, будет вне селекторов.
- person BoltClock; 24.07.2013
Как насчет красной тени толщиной 1 пиксель, чтобы убедиться, что мы не видим черного?
- person Brewal; 24.07.2013
@ Brewal в Chrome немного лучше, да. Я добавил это к своему ответу.
- person Denys Séguret; 24.07.2013
@AndrewClody Мне нравится это решение, так как я надеюсь, что оно не будет зависеть от браузера, и будет отображаться только одна часть текста. Но какая прелесть сделать что-то, что я считал тривиальным!
- person PedroKTFC; 24.07.2013
@PedroKTFC То, что ты делаешь, не совсем стандартно, если честно. Проблема в том, что ваш HTML далек от семантики. Начальный * является элементом украшения и должен был быть сделан иначе (с элементом списка или с ::before). Это одна из причин, по которой это трудно сделать. Другое дело, что элементы должны быть однородными, их не следует разделять в CSS вообще.
- person Denys Séguret; 24.07.2013
@dystroy Я бы с вами согласился, но проблема в том, что у меня нет особого контроля над html. В некоторых местах звездочка находится в теге ‹em›, что значительно упрощает работу с ним.
- person PedroKTFC; 24.07.2013
@PedroKTFC Я понял, поэтому и отвечаю. Я не критиковал вас, а просто пытался объяснить, почему это сложно: это потому, что это неправильный путь;)
- person Denys Séguret; 24.07.2013
li? - person Denys Séguret schedule 24.07.2013pна HTML-странице первая буква была красной? Если нет, то по каким критериям вы отличаете его от других? - person lurker schedule 24.07.2013