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

html css hyperlink pseudo-element text-decorations 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

Como remover apenas o sublinhado de um: antes?

Respostas:

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