Незважаючи на те, що веб-дизайнери мають у своєму розпорядженні широку палітру можливостей управління зовнішнім виглядом документів, основні функції CSS не передбачають того ж щодо виду підкреслення посилань на сторінках. Але завдяки кільком новим прийомам, ви зможете змінити так само і вигляд ваших гіперпосилань.
Такий «збагачений» вид посилань дозволяє внести деяку різноманітність, що, безумовно, може бути корисно. Цей прийом так само може бути використаний для розмежування різних типів посилань усередині самого сайту.
Отже, почнемо
Почніть із створення вашої власної риси. Графіка повинна повторюватися горизонтально, і якщо Ви хочете, щоб крізь неї було видно фон сайту, то створіть прозорий .gif файл.
Якщо ваша лінія підкреслення у висоту більше декількох пікселів, вам слід збільшити висоту відображення рядка абзацу (тег <p>) для того, щоб додати більше простору між її нижньою і верхньою межами.
p { line-height: 1.5; }
Перш ніж ми займемося створенням власних ліній підкреслення для посилань, нам треба відключити варіант, встановлений за замовчуванням:
a { text-decoration: none; }
Щоб створити свій власний вид підкреслення посилання, візьмемо намальовану нами картинку в якості фону:
a { background-image: url(underline.gif); }
Нам потрібно, щоб наша графіка повторювалася тільки горизонтально під нашим текстом, і в жодному разі не вертикально, тому що тоді вона буде відображатися позаду тексту самого посилання. Обмежимо повтор фону горизонтальною віссю:
a { background-repeat: repeat-x; }
Щоб бути впевненим у тому, що наша графіка відображається під текстом незалежно від розміру шрифту, ми будемо використовувати властивість «background-position», яка і «прив’яже» зображення до нижньої частини рядка. Для різних видів зображень – таких, наприклад, як стрілки, – можна використовувати інші варіанти вирівнювання. У нашому випадку буде використовуватися вирівнювання по правому нижньому кутку.
a { background-position: 100% 100%; }
Для того, щоб додати трохи вільного простору між графікою і текстом, потрібно збільшити нижній відступ. Поточна позиція нашого зображення під текстом посилання буде змінюватись в залежності від розміру шрифту. Я пропоную для початку зробити нижній відступ рівним висоті вашого зображення, а потім відрегулювати його в залежності від ваших смаків:
a { padding-bottom: 4px; }
Так як картинка поміщена внизу нашого елемента, нам слід подбати про те, щоб посилання не переходило на інший рядок. (Якщо перенесення буде дозволене, підкресленим буде тільки нижній рядок). Використовуємо властивість CSS «white-space property», щоб заборонити перенос.
a { white-space: nowrap; }
Тепер всі ці властивості можна об’єднати:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
Якщо ж ви хочете, щоб цей ефект з’являвся тільки при наведенні курсору на посилання, просто надайте властивість «background» і його опис псевдо-класу «: hover«.
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
***
Це переклад статті.
Джерело: webmascon