Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

  • 0
borus

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

Вопрос

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Конкретно для этой страницы в 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;

}

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

Поделиться сообщением


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

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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Конкретно для этой страницы в 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 это не сработало. не понятно.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
почему нельзя просто поместить эту "Новинку" в <span> с классом?

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах