CSS после оформления текста псевдокласса в ссылке

Цель моего вопроса - создать код, который добавит тип файла после ссылки (чтобы люди знали, следует ли ожидать каких-либо специальных файлов). Теперь есть варианты сделать это с помощью изображения, но мне это не очень нравится, и я предпочел бы иметь тип файла между квадратными скобками в другом размере. Мой подход заключается в использовании: после псевдокласса следующим образом:CSS после оформления текста псевдокласса в ссылке

a[href$='.doc']:after, a[href$='.rtf']:after { 
content: " [DOC]"; 
font-family: Monospace; 
font-size: 60%; 
font-weight:bolder; 
color:red; 
position:relative; 
top: -0.8em;  
}

Однако это вызывает у меня очень странную проблему. Содержимое, похоже, находится в блоке, который является частью ссылки. Поэтому подчеркивание ссылки продолжается после ссылки в разделе «[DOC]».

Итак, вопрос довольно прост: есть ли способ сделать это по-другому или убедиться, что я могу контролировать то, что находится под «[DOC]» отдельно от того, что находится под ссылкой?

источник

2011-02-23 HKoldor

спросил перед: http://stackoverflow.com/questions/1238881/text-decoration-and-the-after-pseudo-element-revisited см. Также вопрос doctype: http://doctype.com/%E2%80 % 9Ctextdecoration% E2% 80% 9D-% E2% 80% 9Cafter% E2% 80% 9D-псевдоэлемент – roryf

Я надеюсь, что кто-то будет пикировать и указать более чистый способ, но это работает:

Live Demo

HTML:

<a href="lol.doc"><span>lol</span></a>

CSS:

a { 
    text-decoration: none 
} 
a span { 
    text-decoration: underline 
} 
a[href$='.doc']:after, a[href$='.rtf']:after { 
    content: " [DOC]"; 
    font-family: Monospace; 
    font-size: 60%; 
    font-weight:bolder; 
    color:red; 
    position:relative; 
    top: -0.8em; 
}

источник

2011-02-23 12:37:42 thirtydot

противный, но он работает! – roryf

@roryf: Я рад, что никто, кажется, не нашел более чистого исправления в ваших связанных вопросах. Опять же, мне жаль, что не было более чистого исправления :) – thirtydot

Попробуйте добавить дисплей: встроенный блок;

a[href$='.doc']:after, a[href$='.rtf']:after { 
content: " [DOC]"; 
display: inline-block; 
font-family: Monospace; 
font-size: 60%; 
font-weight:bolder; 
color:red; 
position:relative; 
top: -0.8em;  
}

не проверен в IE, но я думаю, что IE имеет проблемы с селекторами атрибутов и: после или обоих.

источник

2011-02-23 12:45:48 mark123

Смотрите: http://jsfiddle.net/fsEUE/1/ - он работает в Chrome, Opera; но, к сожалению, не в Firefox, IE8, Safari. +1 в любом случае. – thirtydot

Я использую его с фоновым изображением, а не с содержимым, и, похоже, он работает лучше: http://jsfiddle.net/imaginekitty/fsEUE/2/ – mark123

Yup, который работает в «каждом» браузере. Это хорошая идея, если OP счастлив использовать изображение вместо этого. – thirtydot

Все: я, вероятно, буду придерживаться изображения, так как это кажется немного более надежным (с точки зрения поддержки браузеров). Мой наивный взгляд на мир, что простой текст всегда должен быть проще, чем изображение в этом случае не так;).

источник

2011-02-23 20:46:44 Hazkan

Даже если вы просто сделаете изображение с надписью «[DOC]», по крайней мере, у вас будет предвидение его ширины, чтобы вы могли добавить правильное дополнение и не беспокоиться о том, изменит ли пользовательский интерфейс свой текст браузера. – mark123

Подождите, вы тот же человек, который задал вопрос? – mark123

@ mark123: Это одно и то же лицо на другом аккаунте. Вы можете сказать это тем, что у них есть тот же Gravatar, что означает, что у них одинаковый адрес электронной почты. – thirtydot

CSS после оформления текста псевдокласса в ссылке

ответ

Смежные вопросы