Как убрать underline на в выносных элементах шрифта при помощи css или javascript?

Question

[Олег]

Обычный андерлайн работает так, как на первом примере, нужно достичь эффекта который показан на втором. Возможно ли это реализовать стандартными возможностями css или нужно прибегать к js? Если да, то как?

Answer 1

[Battletoads]

Зачем лишний div? Ведь есть же before и after
jsfiddle.net/Ry6cp/7/

Comments

[Олег]

Вариант с тенями работает хорошо не на всех буквах. Хотя — это и самый очевидный вариант, но он просто не годится для нормального дизайна. И еще не понятно, как это решение будет работать на целом блоге. Пока только приходит мысль скрипта который будет у всех букв из списка удалять border-bottom или underline.

[SOb_S]

Как это будет работать на целом блоге, можно посмотреть тут, например: kizu.ru (блог не мой)

Answer 2

[Stalker_RED]

Самое первое что пришло в голову: http://jsfiddle.net/Ry6cp/
Белая обводка вокруг текста, а линия под ним, в фоне.

Костыль конечно, но пока text-stroke не поддерживается браузерами я не знаю решения лучше.

З.Ы, линию можно реализовать и другими способами, в зависимости от конкретной задачи.

Comments

[Shultc]

Не лучший вариант:

[Shultc]

Вот так в FF выглядит более-менее адекватно ваш код: jsfiddle.net/Ry6cp/1/
Вообще я в этом не силён.

[Desiderata]

Ещё один вариант. Вместо толщины линии можно у меньшить толщину обводки.

[Desiderata]

Наилучшим вариантом будет оставить только боковые тени шрифта jsfiddle.net/Ry6cp/3/

[Олег]

Тепло, но на других символах выглядит не очень аккуратно (Safari 5).

Answer 3

[Shultc]

Мне приходит в голову разве что возможность написать свой шрифт, к которого все буквы будут сразу же подчёркнуты так, как вам надо.

Разумеется, в таком случае будут проблемы: к примеру вы не сможете менять цвет, которым вы подчёркиваете.