“text-decoration” e o pseudoelemento “:after”, revisitados

Question

estou perguntando novamente essa questão porque suas respostas não funcionaram no meu caso.

Na minha folha de estilo para mídia impressa, quero anexar o URL após cada link usando o :after pseudo-classe.

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

No Firefox (e provavelmente no Chrome, mas não no IE8), text-decoration: none é ignorado e o sublinhado se estende de maneira pouco atraente pela parte inferior do URL.O color no entanto, está corretamente definido como preto para o URL.Existe uma maneira de fazer o text-decoration trabalhar?

O pergunta original imagens de tamanho fixo anexadas em vez de texto de largura variável.Suas respostas usam preenchimento e imagens de fundo para evitar o uso da propriedade text-decoration.Ainda estou procurando uma solução quando o conteúdo é texto de largura variável.

Answer 1

A implementação dos pseudoelementos :before e :after no IE8 está incorreta.Firefox, Chrome e Safari o implementam de acordo com a especificação CSS 2.1.

5.12.3 Os pseudoelementos :before e :after

O ': antes' e ': depois de' pseudo-elementos podem ser usados ​​para inserir conteúdo gerado antes ou depois de um conteúdo do elemento.Eles são explicados na seção sobre texto gerado.

...

Especificação de folhas de estilo em cascata nível 2, revisão 1 (CSS 2.1)

A especificação indica que o conteúdo deve ser inserido antes ou depois o conteúdo do elemento, não o elemento (ou seja,<elemento>conteúdo: antes contente conteúdo: depois</elemento>).Assim, no Firefox e no Chrome, a decoração de texto que você encontra não está no conteúdo inserido, mas sim no elemento âncora pai que contém o conteúdo inserido.

Acho que suas opções usarão a técnica de imagem de fundo/preenchimento sugerida em sua pergunta anterior ou possivelmente agrupando seus elementos âncora em elementos span e aplicando os pseudoelementos aos elementos span.

Answer 2

Se você usar display: inline-block no :after pseudo, o text-decoration Declaração funcionará.

Testado no Chrome 25, Firefox 19

Answer 3

Eu tive o mesmo problema e minha solução era definir a altura e Overflow: oculto

http://jsfiddle.net/r45l7/

a {
    text-decoration: underline;
}

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

Funciona no IE, FF, Chrome.

Answer 4

Como alternativa, você pode usar uma borda inferior em vez de uma decoração de texto. Isso pressupõe que você conhece a cor do fundo

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

Answer 5

A única coisa que funcionou para mim foi declarar um seletor repetido separado com a mesma propriedade de decoração de texto que estava herdando de seus pais e, em seguida, no seletor principal, definindo a decoração de texto para nenhum.

Aparentemente, ou seja, não sabe o que fazer quando você definir text-decoration: none Em um elemento pseudo sem esse elemento ter a propriedade de decoração de texto declarada (que, por padrão, não tem nada declarado por padrão). Isso faz pouco sentido, porque obviamente está sendo herdado dos pais, mas, infelizmente, agora temos navegadores modernos.

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 6

O que faço é adicionar uma extensão dentro do elemento A, como este:

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

Então, no seu arquivo CSS:

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

Answer 7

Sei que isso não está respondendo à pergunta que você está fazendo, mas há uma razão pela qual você não pode usar o seguinte (background-abordagem baseada em base):

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 */
}

Tanto quanto eu sei, a implementação do Firefox de :after Observa a propriedade da classe do seletor, não a classe PSUDO. Pode valer a pena experimentar diferentes docttypes? A transição, e não rigorosa, às vezes permite resultados diferentes (embora nem sempre Melhor resultados...).

Editar:

Parece que usar

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

substitui, ou pelo menos esconde, o text-decoration. Isso realmente não fornece nenhum tipo de resposta, mas pelo menos oferece uma solução alternativa.

Answer 8

Você pode selecionar links automáticos para arquivos PDF por:

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

Ou seja, menos de 8 pode ser habilitado a funcionar corretamente, implementando este link na cabeça do arquivo HTML:

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

Ele também funciona muito bem nas versões do Al, IE, quando você usa a coisa posterior antes do conteúdo para aspas de doação.

Answer 9

Posicione o conteúdo absolutamente como segue:

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

Isso funciona para mim no Firefox 3.6, não testado em nenhum outro navegador, boa sorte!

Answer 10

Olá, eu também estava tendo problemas com isso e por acaso tropeçar em uma solução alternativa.

Para contornar isso, envolvi o URL no div e usei algo assim.

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

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

Answer 11

1)

:after{
    position: absolute;
}

não é perfeito, porque o conteúdo do elemento não envolve

2)

:after{
    display: inline-block;
}

não é perfeito, porque às vezes desejamos que o conteúdo sempre deve ser envolvido com o conteúdo da última palavra de elemento.

Por enquanto, não consegui encontrar uma solução perfeita se encaixa em todas as três condições (1. O conteúdo poderia embrulhar automaticamente se for muito longo 2. após o conteúdo deve ser envolvido com o conteúdo do elemento, o que significa que após o conteúdo não deve ocupar um único por si mesmo. 3 .Text Decoração deve ser aplicada apenas na condição do elemento não se aplicar ao conteúdo após o conteúdo.) Eu penso que está usando outra maneira de imitar a decoração de texto.