borus

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

}

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

Share this post


Link to post
Share on other sites
нужно задать красный цвет только для слова "Новинка!" в заголовке

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
почему нельзя просто поместить эту "Новинку" в <span> с классом?

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,333
    Total Members
    3,128
    Most Online
    sohaibkhalid614
    Newest Member
    sohaibkhalid614
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.