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

Ответ 1

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

5.12.3: перед и: после псевдоэлементов

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

...

Каскадные таблицы стилей Уровень 2 Версия 1 (CSS 2.1) Спецификация

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

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

Ответ 2

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

Протестировано в Chrome 25, Firefox 19

Ответ 3

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

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

Ответ 4

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

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.

Ответ 5

Я понимаю, что это не отвечает на вопрос, который вы задаете, но есть ли причина, по которой вы не можете использовать следующий (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 наблюдается свойство класса selector, а не psuedo-class. Может быть, стоит поэкспериментировать с разными доктринами? Переходный, а не строгий, иногда допускает разные результаты (хотя и не всегда лучшие результаты...).

Edit:

Похоже, что используя

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

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

Ответ 6

Единственное, что сработало для меня, - это объявление отдельного повторного селектора с тем же свойством 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.
}

Ответ 7

Вы можете автосогласовать ссылки на 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 он работает очень хорошо, когда вы используете контент до начала содержимого для раскладки кавычек.

Ответ 8

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

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, но не протестировано ни в каких других браузерах, но удачи!

Ответ 9

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

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

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

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

Ответ 10

Что я делаю, так я добавляю span внутри элемента a, например:

<a href="#" onclick="location.href='http://foo.bar'; return false;"><span>link text</span></a>

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

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}