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 это не сработало. не понятно.

Изменено пользователем borus

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


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

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

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

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

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


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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 180
    Всего пользователей
    3 128
    Рекорд онлайна
    evgengold
    Новый пользователь
    evgengold
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.