Text-decoration: none does not work with Rails links

Question

I have 2 links with Glyphicons and want Text-decoration: none; But for some reason it wont disappear, i'm getting always a hover Line.

The Links are:

<p class="user-profile-social-links pull-right">
  <% if @user.facebooklink.present? %>
      <%= link_to @user.facebooklink, title: "Facebook", :target => '_blank' do %>
          <i class="icon-facebook-sign"></i>
      <% end %>
  <% end %>

  <% if @user.twitterlink.present? %>
      <%= link_to @user.twitterlink, title: "Twitter", :target => '_blank' do %>
          <i class="icon-twitter-sign"></i>
      <% end %>
  <% end %>
</p>

And the class has this CSS:

.user-profile-social-links {
text-decoration: none;
display: block;
color: #777;
}

Am i doing something wrong ? why isn't it working ?

*EDIT: * This is what i'm still getting -> http://imgur.com/raC362u (Zoom a little bit in to see the line beneath the icon)

Answer 1

I think Gareth is right. There however may be a style that overrides this one.

Try adding !important:

.user-profile-social-links a {
    text-decoration: none !important;
    color: #777;
}

Answer 2

You're setting these styles on your p.user-profile-social-links, and p elements already have no text-decoration, so this part of the rule actually does nothing.

You need to apply some of these styles on the a elements inside your p:

.user-profile-social-links a {
    text-decoration: none;
    color: #777;
}

.user-profile-social-links {
    display: block;
}

Answer 3

Links have a default text-decoration and could be changed by placing this anywhere on your application.css :

a:-webkit-any-link {
    text-decoration: none;
    cursor: auto;
}