«text-decoration» и псевдоэлемент «: after», пересмотренный

Question

Я перепрошу this question, потому что его ответы не работали в моем случае.

В моей таблице стилей для печатных носителей Я хочу добавить URL-адрес после каждой ссылки, используя псевдо-класс :after.

a:after { 
    content: " <" attr(href) ">"; 
    text-decoration: none; 
    color: #000000; 
} 

В Firefox (и, вероятно, Chrome, но не IE8), text-decoration: none игнорируется, и подчеркивание простирается непривлекательно в нижней части URL. Однако color правильно настроен на черный для URL-адреса. Есть ли способ сделать работу text-decoration?

original question Прилагаемые изображения фиксированного размера вместо текста переменной ширины. Его ответы используют прописку и фоновое изображение, чтобы избежать использования свойства text-decoration. Я все еще ищу решение, когда контент является текстовым текстом переменной ширины.

Answer 1

Выполнение IE8: перед и после псевдоэлементов неверно. Firefox, Chrome и Safari реализуют его в соответствии со спецификацией CSS 2.1.

5.12.3 The: до и: после того, как псевдо-элементов

Символ ': до' и ': после того, как' псевдо-элементы могут быть использованы для вставки генерируется содержимое перед или после содержание элемента. Они объясняются в разделе о сгенерированном тексте.

...

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

В спецификации указывает на то, что контент должен быть вставлен до или после того, как содержимого элемента, не элемент (т.е.< элемент > содержание: до содержание содержание: после </элемент >). Таким образом, в Firefox и Chrome текстовое оформление, с которым вы сталкиваетесь, находится не на вставленном контенте, а на родительском элементе привязки, который содержит вставленный контент.

Я думаю, что ваши варианты будут использовать метод background-image/padding, предложенный в вашем предыдущем вопросе, или, возможно, обернуть ваши элементы привязки в элементах span и вместо этого применить псевдоэлементы к элементам span.

Answer 2

Я понимаю, что это не отвечает на вопрос, вы просите, но есть причина, вы не можете использовать следующее (background -На подхода):

a.file_pdf { 
background-image: url(images/pdf.png); 
background-position: center right; 
background-repeat: no-repeat; 
padding-right: 15px; /* or whatever size your .png image is plus a small margin */ 
} 

Насколько я знаю, в реализации Firefox :after наблюдается свойство класса селектора, а не класса psuedo. Может быть, стоит поэкспериментировать с разными доктринами? Переходный, а не строгий, иногда допускает разные результаты (хотя не всегда лучше результатов ...).

Edit:

Оказывается, что с помощью

a:after { 
    content: " <" attr(href) ">"; 
    text-decoration: none; 
    color: #000000; 
    background-color: #fff; /* or whatever colour you prefer */ 
} 

переопределение, или, по крайней мере, шкуры, в text-decoration. На самом деле это не дает никакого ответа, но, по крайней мере, предлагает обходное решение.

Answer 3

Вы можете автовыбор ссылки на PDF-файлы по:

a[href$=".pdf"]:after { content: ... } 

IE менее 8 может быть включена для корректной работы по реализации этой связи в главе HTML-файл:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> 

Он работает также очень хорошо в версиях IE, когда вы используете контент до и после контента для раскладки кавычек.

Answer 4

Позиция содержание абсолютно следующим образом:

a { 
    position: relative; 
    margin: 0 .5em; 
    font-weight: bold; 
    color: #c00; 
} 
a:before, 
a:after { 
    position: absolute; 
    color: #000; 
} 
a:before { 
    content: '<'; 
    left: -.5em; 
} 
a:after { 
    content: '>'; 
    right: -.5em; 
} 

Это работает для меня в Firefox 3.6, не тестируются в других браузерах, хотя, удачи!

Answer 5

В качестве альтернативы вы можете использовать нижнюю границу, а не текстовое украшение. Это предполагает, что вы знаете цвет фона

a { 
    text-decoration: none; 
    border-bottom: 1px solid blue; 
} 
a:after { 
    content: "foo"; 
    border-bottom: 1px solid white; /* same color as the background */ 
} 

Answer 6

Привет Я также возникли проблемы с этим, а также и случилось наткнуться на обходной путь.

Чтобы обойти это, я завернул URL-адрес в div и использовал что-то вроде этого.

.next_page:before { 
    content: '('; 
} 

.next_page:after { 
    content: ')'; 
} 

Answer 7

Если вы используете display: inline-block на :after псевдо, то text-decoration декларация будет работать.

Испытано в Chrome 25, Firefox 19

Answer 8

У меня была такая же проблема, и мое решение было установить высоту и переполнения: скрытый

http://jsfiddle.net/r45L7/

a { 
    text-decoration: underline; 
} 

a:after { 
    content: "»"; 
    display: inline-block; 
    text-decoration: none; 
    height:16px; 
    overflow: hidden; 
    padding-left: 10px; 
} 

Она работает на IE, FF, Chrome.

Answer 9

Единственное, что сработало для меня, это объявление отдельного повторного селектора с тем же свойством text-decoration, которое оно наследует от его родителя, а затем в главном селекторе, устанавливая text-decoration в none.

IE, по-видимому, не знает, что делать, когда вы устанавливаете text-decoration: none на псевдоэлемент без этого элемента, объявляющего свойство text-decoration (которое по умолчанию не объявлено по умолчанию). Это мало смысла, потому что это, очевидно, унаследовано от родителя, но, увы, теперь у нас есть современные браузеры.

span.my-text { 
    color: black; 
    font-size: 12px; 
    text-decoration: underline; 
} 

span.my-text:after { 
    text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below 
} 

span.my-text:after { 
    color: red; 
    text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element. 
} 

Answer 10

То, что я делаю, я добавить промежуток внутри элемента, например:

<a href="http://foo.bar"><span>link text</span></a> 

Затем в файле CSS:

a::after{ 
    content:" <" attr(href) "> "; 
    color: #000000; 
} 

a { 
    text-decoration:none; 
} 

a span { 
    text-decoration: underline; 
}