Pergunta

Aqui está a situação. Eu tenho um link padrão assim:

<h2><a href="#">Link Title</a></h2>

Agora, eu quero inserir um fundo para torná-lo parecido com um botão, então eu adicionar um span com JQuery assim:

$(document).ready(function()
{
      $(".post a").wrapInner("<span></span>");
});

(o HTML para o link pode ser encontrado aqui, http://flickrental.co.uk/ - a propósito, este não é o local, apenas o código para o link)

Agora eu posso transformar o link em um "botão" mais agradável e estou muito feliz ... Mas tive outro pensamento, e se eu poderia adicionar uma imagem pequena seta dentro do link (Para a direita do texto) (Este site é um site afiliado e o botão deve aumentar o CTR, bem como a imagem de seta)

Mas eu não consigo encontrar a sintaxe direito de fazer isso.

Todas as idéias?

Foi útil?

Solução

Você provavelmente deve adicionar a seta com css. Dado um pixel 10 de largura arrow:

.post a {
    padding-right: 10px;
    background: url(arrow.png) no-repeat right 50%;
}

Mas se você já está usando a imagem de fundo para outra coisa, você pode adicionar a imagem com jQuery:

$("<img src='arrow.png'/>").prependTo(".post a");

Presumo de sua pergunta que você não tem acesso para alterar o código HTML diretamente. Caso contrário, isso provavelmente seria a melhor solução.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top