Как удалить подчеркивание ссылок-картинок

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

При создании нового дизайна для блога я столкнулся с такой проблемой: если картинка является ссылкой (кнопкой, ведущей на определенную страницу, миниатюрой, указывающей на оригинальное изображение, баннером, то она подчеркивается (как и должна себя вести нормальная ссылка). Все бы ничего, но все таки картинка — это не просто ссылка, это — определенным образом украшенный декоративный визуальный элемент блога, который сам по себе, со свои оформлением (например, при наведении на картинку она подсвечивается, обводится рамкой). Поэтому лишние подчеркивания под картинкой (а еще хуже, когда вылезает подчеркивание над картинкой) мне не нужны. Покопавшись в файле style.css, я понял, что не разберусь с этой проблемой в лоб (две тысячи строчек кода) — нужно какое-то другое, более универсальное и более хитрое решение. И оно таки было найдено!

Изучив подобную тему в интернете и обобщив чужой опыт, я нашел единственно верное, приемлемое в любом моем блоге, кроссбраузерное, и очень элегантное решение. И так, не буду тянуть кота за сделать нужно следующее: откройте файл style.css и добавьте в него всего одну строчку. Вот эта строчка:

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { text-decoration: none; border: 0 none; }

Этот код добавляет условие для отображения ссылок: если ссылка является картинкой JPG, JPEG, JPE, PNG и GIF, то она не будет подчеркиваться. Отличное решение — проблему как рукой сняло, в то время, как стиль отображения самих картинок остался без изменений.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Grawl

    О да, когда Я обнаружил эту фичу в CSS — квадратные скобки — был очень рад.

    Ответить
  2. pro design blog

    хммм.. а почему не

    a img{
    text-decoration: none; border:none
    }

    ?
    в 100 раз проще по-моему..

    Ответить
    1. tiaurus

      А вот тут и кроется противоречие — приведенный вами код не всегда работает. Вернее, он работает, но не так, как надо. Если тема сложная, и есть множество контейнеров с различными стилями, и в каждом из них используются картинки, то такой код будет слишком обобщеным. А вот код, приведенный в статье действует избирательно. В общем, мне он помог — пусть поможет и другим.

      Ответить
      1. pro design blog

        но на то есть правило !important ))

        Ответить
  3. Dasha

    спасибо, как раз в тему

    Ответить
  4. Yury

    жаль мне не помогло (((( видимо тема такая.

    Ответить
    1. Юрий

      Вот так помогло мне:
      a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { border-bottom: 0px solid #fff !important; padding-bottom: 0px !important; }

      Ответить
  5. Kvanto

    Простите, а куда вставлять эту строчку?

    Ответить
    1. Юрий

      в style.css темы

      Ответить
  6. Евгений

    Не помогло. Есть еще варианты? Тема *Twenty Seventeen*

    Ответить