Как подсветить определенное слово с помощью CSS?

[borus]

Здравствуйте.

В joomla имеется статья с заголовком, и нужно задать красный цвет только для слова "Новинка!" в заголовке. В админке такого нельзя сделать, насколько знаю. Можно ли каким-либо свойством CSS подсветить красным это слово?

[SelenIT]

Класс заголовку задать хотя бы можно? Если да, то можно сделать финт ушами — подставить это слово псевдоэлементом (тем же шрифтом, но другим цветом) и накрыть им часть оригинального текста

Других вариантов на ум не приходит...

[borus]

Класс заголовку задать хотя бы можно? Если да, то можно сделать финт ушами — подставить это слово псевдоэлементом (тем же шрифтом, но другим цветом) и накрыть им часть оригинального текста

Других вариантов на ум не приходит...

Дорогой SelenIT, я пока не на такой высокой орбите понимания как вы Давайте попробуем на примере.

Вот сайт, в разделе Популярные решения первый заголовок статьи содержит "Новинка!". И только там, где есть Новинка!, новинку! надо сделать красной

Для обертывающего ссылку span задан класс title. Этого достаточно для осуществления вашего решения? В принципе, могу назначить класс/id самой ссылке.

[SelenIT]

Конкретно для этой страницы в Firefox (как минимум) получилось так:

.title a[href=/index.php/programmnyye-produkty/programmy-1s/8-1s-otchetnost] {

   position: relative;

   white-space: nowrap; /* ссылка должна быть только в одну строку, иначе надпись-накладка "съедет" */

}

.title a[href=/index.php/programmnyye-produkty/programmy-1s/8-1s-otchetnost]:after {

   color: red;

   content: "Новинка!";

   position: absolute;

   right: 0;

}

Задать класс самой ссылке (точнее, всем будущим ссылкам с красной надписью "Новинка!" в конце), конечно, лучше.

[Kray Storm]

нужно задать красный цвет только для слова "Новинка!" в заголовке

На всю страницу только одно слово "Новинка".

Я догадываюсь, что мой вопрос наверное, глупый, но почему нельзя просто поместить эту "Новинку" в <span> с классом?

Или даже без класса, а просто в стилях задать последовательность, вроде "a span:first-child{}".

HTML:
<a href="#">Вот и <span class="new">Новинка</span></a>
CSS:
.new{color:#f00;}

Вроде даже работает.

Зачем в данном случае через ":after" делать накладку на оригинальный текст, которая может съехать? А если у ссылки href потом изменится значение, то и правило перестанет работать.

[borus]

Конкретно для этой страницы в Firefox (как минимум) получилось так:

.title a[href=/index.php/programmnyye-produkty/programmy-1s/8-1s-otchetnost] {

   position: relative;

   white-space: nowrap; /* ссылка должна быть только в одну строку, иначе надпись-накладка "съедет" */

}

.title a[href=/index.php/programmnyye-produkty/programmy-1s/8-1s-otchetnost]:after {

   color: red;

   content: "Новинка!";

   position: absolute;

   right: 0;

}

Задать класс самой ссылке (точнее, всем будущим ссылкам с красной надписью "Новинка!" в конце), конечно, лучше.

благодарю. в хроме 23-ем и мозилле 17 это не сработало. не понятно.

Edited December 6, 2012 by borus

[SelenIT]

почему нельзя просто поместить эту "Новинку" в <span> с классом?

Насколько я понял, админка CMS позволяет вводить заголовок только как текст, преобразуя угловые скобки в <...>. Если б не это ограничение, то, конечно, смысла извращаться бы не было

не сработало. не понятно.

Пробел перед :after не нужен (это форум добавил, а я не заметил). Без пробела в Fx 17 работает, инфа 100%.