Javascript-форум - Вопрос по CSS (я, наверное, не туда попал...)

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вопрос по CSS (я, наверное, не туда попал...) (https://javascript.ru/forum/dom-window/6844-vopros-po-css-ya-navernoe-ne-tuda-popal.html)

Вопрос по CSS (я, наверное, не туда попал...)

Никто не знает как можно сделать так, чтобы при наведении на ссылку подчёркивалось не всё слово, а только первые 3-4 буквы?
Может, это можно сделать через JavaScript...

<style type="text/css">
a.example:link, a.example:visited, a.example:hover  {
text-decoration: none;
}
a.example:hover span {
text-decoration: underline;
}
</style>

<a class="example" href="#"><span>Exa</span>mple</a>

Я так и думал. Обидно, что по-другому - никак. Но всё-равно, спасибо!

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

Octane,
устанавливать стили для span и div без класса или id - очень плохая идея. Эти элементы являются основополагающими кирпичиками для верстки, и изменение их свойств, даже в пределах элемента, где наличие других спанов не ожидается, может помешать расширяемости и переносимости.

subzey, а переносимости как оно помешать может? Кроме того, делать предположения, как именно лучше сделать ТС, я считаю не разумным. Можно только пример предложить. И вообще, мне твой подход напоминает Hello, world in Patterns

Хорошо.

<style type="text/css">
/* оригинальный цсс */
a.example:link, a.example:visited, a.example:hover  {
text-decoration: none;
}
a.example:hover span {
text-decoration: underline;
}
</style>

<style type="text/css">
/* какой-нибудь подключаемый универсальный цсс с типографикой */
	.typ-thin-space {
		letter-spacing: -.2em;
	}
	.typ-non-breakable {
		white-space: nowrap;
	}
</style>
 
<a class="example" href="#"><span>Exa</span>mple<span class="typ-thin-space typ-non-breakable"> </span>&mdash;<span class="typ-thin-space"> </span>строка</a>

И что мы имеем? Подчеркивания в совешенно ненужных местах. И это еще не самый страшный вариант, иногда спану задают float или position. Тогда что делать? Дебажить и искать, найти и оверрайдить?

Хотя, в конце концов, это — личное дело каждого. Но я бы просто посоветовал избегать в css трех вещей:

установки стилей DIV и SPAN без классов и/или id;
!important;
тривиальных названий классов и пренебрежение префиксами.

Да, и насчет хелловорлда, ясно же, что это всего-лишь пример. Но, ведь, человек же просто скопирует и вставит, а потом может столкнуться с трудностями.

Да, кстати, чтобы решение Octane (хотя оно и абсолютно правильное) работало в IE6, нужно его немного изменить:

a.example:link, a.example:visited, a.example:hover  {
	text-decoration: none;
}
a.example:hover {
	/**/table-layout: fixed;/**/
}
a.example:hover span {
	text-decoration: underline;
}

Где целью table-layout: fixed, либо любого другого бесполезного для ссылки свойства а-ля border-collapse: collapse или background: transparent, является вынудить эту замечательную программу обновить отображение ссылки и всех ее вложеных элементов.

я на данный момент считаю, что когда за верстку отвечаешь только ты, это все не имеет значения. Надо просто не задавать слишком глобальных и слишком локальных (твой вариант) правил

Цитата:

Сообщение от subzey

ясно же, что это всего-лишь пример. Но, ведь, человек же просто скопирует и вставит, а потом может столкнуться с трудностями

так вот зачем ему трудности заранее создавать? Когда столкнеться, тогда и решать будет. А сейчас ему, скорее всего, надо будет "делать как сказали". Такой вариант обычно хуже, чем "знаю на собственном опыте". А что более вероятно, он просто подумает "сами так делайте, задроты". Или вообще он просто поинтересовался и применять пока нигде не собирается.

Т.е. ты, фактически, не зная задачи, советуешь более сложное решение. Но ведь решение от задачи зависит ;)

Зачем вообще какие-то span-ы и div-ы? Зачем усложнять?