LINUX.ORG.RU

Подчёркивание текста пунктиром, border-bottom и гербалайф не предлагать

 


1

1

Нужно подчеркнуть текст не сплошной, а пунктирной линией. Гуголь советует border-bottom: 1px dashed; Но border-bottom проходит ниже text-decoration: underline; (по нижней границе элемента, а underline идёт в притык к тексту).
Демонстрация разницы:
http://jsbin.com/eYeDayo/1/edit?html,css,output

Можно-ли (и если да то как) провести пунктирное подчёркивание по той-же линии что underline?

★★★★★

Ответ на: комментарий от static_lab

Спасибо! Вариант с вложенным элементом подошёл.

MrClon ★★★★★
() автор топика
Ответ на: комментарий от Deleted

Ага, об этом и по ссылке выше есть. Прочёл, помечтал о светлом будущем.
В огнелисе, кстати, счастье уже наступило, хоть и с префиксом.

MrClon ★★★★★
() автор топика

высчитать смещение, сделать :after/:before с абсолютным позиционированием (для этого относительное позиционирование должно быть у объекта-родителя(то есть у того, к которому это применяется) ), высотой 0, и рамкой с нужными параметрами.

funeralismatic ★★★
()
Ответ на: комментарий от funeralismatic

Псевдоэлемент (:after/:before) без содержимого имеет нулевой размер, следовательно рамка не отображается. Что я делаю не так?

Сначала использовал вариан со вложенным элементом, но он был плохо переносим из-за завязки на размер шрифта. Хотя возможно ч просто сделал что-то не так.
Пришлось воспользоваться вариантом с фоновой картинкой:
[code]
.someclass {
text-decoration: none;
display: inline;
background: url(data:image/gif;base64,R0lGODlhAgABAIABACF1m////yH5BAEKAAEALAAAAAACAAEAAAICRAoAOw==);
background-repeat: repeat-x;
background-position: center 1.17em;
}
[/code]
Со смещением пришлось поиграть (в примере предлагалось 0.95), но результат получился вполне приличный внешне, к тому-же лёгший на оба места где мне нужно такое подчёркивание без адаптации.

MrClon ★★★★★
() автор топика
Ответ на: комментарий от MrClon

Псевдоэлемент (:after/:before) без содержимого имеет нулевой размер, следовательно рамка не отображается. Что я делаю не так?

Так задай для них content: ' '

static_lab ★★★★★
()
Ответ на: комментарий от MrClon

Псевдоэлемент (:after/:before) без содержимого имеет нулевой размер, следовательно рамка не отображается. Что я делаю не так?

content:"";

Сначала использовал вариан со вложенным элементом, но он был плохо переносим из-за завязки на размер шрифта. Хотя возможно ч просто сделал что-то не так.

дочернему скормить:

font-size:0;

funeralismatic ★★★
()
Ответ на: комментарий от funeralismatic

В том варианте в дочернем элементе лежит собственно подчёркиваемый текст. font-size:0 сделает его нечитаемым.
Впрочем уже неважно. Проблема решена (пусть и коряво), вернусь к ней скорее всего только когда браузеры подавляющего большенства клиентов научатся text-decoration-style (что может произойти достаточно скоро, учитывая что пользователей IE среди посетителей всего 4%)

MrClon ★★★★★
() автор топика
Ответ на: комментарий от MrClon

а я при вёрстке своего блога (который верстаю уже год, ибо постоянно что-то не нравится, постоянно начинаю сначала, уже второй десяток переделок пошёл) решил послать пользователей IE, и запилил full CSS3. не вижу смысла ориентироваться на IE<9, ибо их уже даже M$ не поддерживает, так почему верстальщики должны страдать?

funeralismatic ★★★
()
Последнее исправление: funeralismatic (всего исправлений: 2)
Ответ на: комментарий от funeralismatic

У меня не личный блог, а как-бы коммерческий сайт (если забыть про полнейшее отсутствие в том деле какой бы то ни было выручки, отличий от бизнеса нет). Тем не менее на пользователей IE я тоже более или менее кладу, какую-то поддержку обеспечиваю, но к полной совместимости не стремлюсь. Просто у нас на сайте, по не известной мне причине, посетителей с IE 4%, а посетителей с IE версии меньше 10 — 2%.
И тем не менее коммунизм на одном отдельно взятом сайте ещё не построен, дело в том что text-decoration-style сейчас умеет только FF, а это 21% посетителей. Opera (23%) и WebKit (52%) пока даже не чешутся.
Так-что костылим помаленьку.

MrClon ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.