Como remover apenas o sublinhado de um: antes?

95

Eu tenho um conjunto de links estilizados usando o :beforepara aplicar uma seta.

Parece bom em todos os navegadores, mas quando aplico o sublinhado ao link, não quero o sublinhado na :beforeparte (a seta).

Veja jsfiddle por exemplo: http://jsfiddle.net/r42e5/1/

É possível remover isso? O estilo de teste com o qual me sentei #test p a:hover:beforeé aplicado (de acordo com o Firebug), mas o sublinhado ainda está lá.

Alguma maneira de evitar isso?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Expandir trecho

— OptimusCrime
fonte

Bem, você obviamente quer uma lista ... Use um elemento UL em vez da combinação DIV / P. Com as listas você obtém os marcadores (ou discos, ...) gratuitamente ...

— Šime Vidas

Por que não usar lista com marcadores personalizados em vez de parágrafos no seu caso? Caso contrário, aplique before-content ao pai p, não para vincular a si mesmo.

— YuS de

Possível duplicata de stackoverflow.com/questions/8536015/…

— Oriol

171

É possível remover isso?

Sim, se você alterar o estilo de exibição do elemento embutido de display:inline(o padrão) para display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Isso ocorre porque as especificações CSS dizem :

Quando especificado ou propagado para um elemento embutido, ele afeta todas as caixas geradas por aquele elemento e é propagado posteriormente para qualquer caixa de nível de bloco de fluxo que divide o embutido (consulte a seção 9.2.1.1). [...] Para todos os outros elementos, ele é propagado para qualquer filho de fluxo. Observe que as decorações de texto não são propagadas para descendentes flutuantes e absolutamente posicionados, nem para o conteúdo de descendentes atômicos de nível embutido, como blocos embutidos e tabelas embutidas .

(Ênfase minha.)

Demo: http://jsfiddle.net/r42e5/10/

_{Obrigado a @Oriol por fornecer a solução alternativa que me levou a verificar as especificações e ver se a solução alternativa é legal.}

— Phrogz
fonte

2

Você pode substituir um text-decoration:underlineaplicado a um elemento pai com display:inline-block. Veja um exemplo: jsfiddle.net/aZdhN/1 . Então, o problema do solicitante pode ser resolvido assim: stackoverflow.com/a/17347068/1529630

— Oriol

3

Pelo que posso ver, isso não funciona no Internet Explorer (teste 8-10). Alguma ideia de como lidar com o IE?

— Linus Caldwell

Eu encontrei uma solução que está funcionando no IE8-11 também: stackoverflow.com/a/21902566/1607968

— LeJared

53

Há um bug no IE8-11 , então usar display:inline-block;sozinho não funcionará lá.

Eu encontrei uma solução para esse bug, definindo explicitamente text-decoration:underline;para: before-content e, em seguida, sobrescrever essa regra novamente comtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Exemplo de trabalho aqui: http://jsfiddle.net/95C2M/

Atualização: Como o jsfiddle não funciona mais com o IE8, basta colar este código de demonstração simples em um arquivo html local e abri-lo no IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— LeJared
fonte

Se o IE8 tivesse um caso, o sublinhado de uma imagem com hiperlink só poderia ser desativado por <img style="text-decoration:underline">dentro (e aqui estava a chave)<a style="padding:0; border:none;">

— Bob Stein

Infelizmente, esse jsfiddle não pode ser verificado no IE8 porque jsfiddle não funciona no IE8.

— user2867288 de

Infelizmente não consegui encontrar nenhuma ferramenta de compartilhamento de código online que ainda funcione com o IE8. Eu adicionei um código cortado à resposta acima, que você pode simplesmente colar em um arquivo html e abri-lo localmente no IE8.

— LeJared

Testado e aprovado no IE9, evento sem dois estados diferentes.

— saeraphin

Tinha um link com um ícone em: antes disso, era para NÃO ser sublinhado no estado de repouso, depois ser sublinhado ao passar o mouse, mas não o ícone. Aqui está o que eu tive que fazer para convencer o IE a acertar: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (sim, sério, primeiro sublinhado, em seguida, substitua por nenhum) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

7

Você pode fazer isso adicionando o seguinte ao :beforeelemento:

display: inline-block;
white-space: pre-wrap;

Com display: inline-blocko sublinhado desaparece. Mas então o problema é que o espaço após o triângulo entra em colapso e não é mostrado. Para consertar, você pode usar white-space: pre-wrapou white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

— Oriol
fonte

1

1 para a pre-wrapdica. Eu estava usando content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Envolva seus links em intervalos e adicione a decoração de texto ao intervalo no a: hover assim,

a:hover span {
   text-decoration:underline;
}

Eu atualizei seu violino para o que acho que você está tentando fazer. http://jsfiddle.net/r42e5/4/

— Úberes
fonte

Boa ideia. Foi assim que eu fiz antes. O problema é que esse link é produzido em um sistema cms e nossos clientes estão preenchendo-o como rich text.

— OptimusCrime

que idioma é o CMS? Conseguiria fazer com que ele soltasse o link e depois o envolvesse antes de enviá-lo ao navegador?

— Tetas de

A empresa está usando modx. Acho que poderia fazer isso como uma última saída, mas eu realmente queria anular isso. Acho que não é possível. Obrigado de qualquer forma.

— OptimusCrime

-1

tente usar em seu lugar:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

isso vai servir?

— Elen
fonte

Eu tenho muitos parágrafos no meu div, então isso não funcionará. Boa ideia tho.

— OptimusCrime

interessante quem colocou -1 se a resposta aceita sugere o mesmo, mas de forma diferente ...

— Elen

-4

usa isto

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— Bipin Chandra Tripathi
fonte

não faz nada. a decoração do texto é ignorada.

— OptimusCrime