-1

Photos of the icons with the blue line

I'm trying to get rid of these on my site (the blue lines below the icons) (I'm coding in HTML and CSS) I've tried a bunch of different things like text-decoration: none; borders:none;(for images) Can't seem to find how to solve this

This is what my HTML looks like:

.socialmediawidgets{
     text-align: left;
}
<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>
kabanus
  • 24,623
  • 6
  • 41
  • 74
Pieter van zyl
  • 33
  • 3
  • Try it all that, but not for `a`, for example : `.socialmediawidgets a {text-decoration:none;}` and so on. That "blue line" isn't part of image but `a` (link). – nelek Apr 19 '18 at 12:04

2 Answers2

0

Isolating the scope to your code, you can add text-decoration: none to .a. If you are expanding the code and would like to isolate the removing of underscore to the area you have now you should use:

.socialmediawidgets a {
text-deoration: none;
 }

See attached snippet that shows your code and the change in CSS:

.socialmediawidgets{
   text-align: left;
 }
 
 a {
 text-decoration: none;
 }
<div>
    <div class="socialmediawidgets">
 <a href="[full link to your Twitter]">
 <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Pinterest]">
 <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Facebook page]">
 <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your LinkedIn]">
 <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Instagram]">
 <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" 

width="35" height="35" />
 </a>
 
</div>
</div>
Toolbox
  • 2,333
  • 12
  • 26
0

You should add text-decoration:noneon the CSS. Check the Docs

Note I´ve created a CSS selector ".socialmediawidgets a"

This way, the links affected, are only the ones under .socialmediawidgets div

.socialmediawidgets{
     text-align: left;
}

   .socialmediawidgets a {
    text-decoration:none;
  }
<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>`
Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31