XF 2.2 CSS: text-decoration: none; how to ??

[Nicolas FR]

Hello,

There is something i don't understand, this CSS code works fine in Codepen for example.
When i mouse-over the link it is not underlined

.ask a {
    text-decoration: none;
}
.ask:hover {
    background: rgb(232, 232, 232);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.ask {
    border: 1px solid #ebebeb;
    border-radius: 3px;
    background: rgb(238, 238, 238);
    padding: 8px 15px;
    font-weight: 400;
}

But in Xenforo the same code in extra.less, the link is underlined when mouse-over. (even with !important)
Can you explain this ?

Thanks !

 

[Paul B]

What is the HTML you are using with the CSS?

 

[Nicolas FR]

You know what Brogan? You are getting stronger and stronger! Your simple question put me on the alert ... I was writing my HTML badly !!

Like that <a href="/forums/suggestions.106/post-thread"><div class="ask">Proposer une idée</div></a> instead of <div class="ask"><a href="/forums/suggestions.106/post-thread">Proposer une idée</a></div>

Thanks !

 

[Paul B]

You could also use this less format:

.ask
{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    background: rgb(238, 238, 238);
    padding: 8px 15px;
    font-weight: 400;

    & a
    {
    text-decoration: none;
    }

    &:hover
    {
    background: rgb(232, 232, 232);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
}

 

[Nicolas FR]

Perfect, merci.