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

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

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

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

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.

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

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

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

Edit:

похоже, что с помощью

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

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

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

Я добавить span внутри элемента, как это :

<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;
}

вы можете автоматически выбирать ссылки на 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]-->

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

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

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

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

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

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

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