"text-decoration "и": after " псевдо-элемент, revisited
я переспрашиваю этот вопрос потому что его ответы не сработало в моем случае.
в моей таблице стилей для печатных носителей я хочу добавить url-адрес после каждой ссылки с помощью :after
псевдо-класса.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
в Firefox (и, вероятно, Chrome, но не IE8),text-decoration: none
игнорируется, и подчеркивание непривлекательно растягивается в нижней части url-адреса. The color
однако правильно установлено значение black для url. Есть ли способ сделать text-decoration
работа?
на исходный вопрос добавлены изображения фиксированного размера вместо текста переменной ширины. Его ответы используют заполнение и фоновые изображения, чтобы избежать необходимости использовать свойство text-decoration. Я все еще ищу решение, когда содержимое переменной ширины текста.
10 ответов
реализация IE8 :before и: after псевдо-элементов неверна. Firefox, Chrome и Safari реализуют его в соответствии со спецификацией CSS 2.1.
5.12.3 в :before и :after псевдо-элементы
С ':до' и 'после' псевдо-элементы можно использовать для вставить генерируемый контент до или после содержание элемента. Они объясняются в разделе генерируемый текст.
...
Каскадные Таблицы Стилей Уровень 2 Редакция 1 (CSS 2.1) спецификация
спецификация указывает, что содержимое должно быть вставлено до или после содержание элемента, не элемент (т. е. содержание:перед контент содержание:после). Таким образом, в Firefox и Chrome текстовое оформление, с которым вы сталкиваетесь, не включено вставленное содержимое, а не родительский элемент привязки, содержащий вставленное содержимое.
Я думаю, что ваши варианты будут использовать технику фонового изображения/заполнения, предложенную в вашем предыдущем вопросе, или, возможно, обернуть ваши якорные элементы в элементы span и применить псевдо-элементы к элементам span.
Если вы используете display: inline-block
на :after
псевдо тег text-decoration
декларации будет работать.
протестировано в Chrome 25, Firefox 19
У меня была та же проблема, и моим решением было установить высоту и переполнение:скрытый
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: ')';
}