Can't get rid of link underline

Question

So I have been trying to get rid of this link underline and I just cannot seem to figure it out. I have put text-decoration:none; on everything and anything I can think of to try and fix this issue so if anyone has any ideas as to how to get rid of this stubborn underline that would really help! Thank you!

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
 text-decoration: none;

}

#recent{
 padding:20px;
 text-decoration: none;
 
}
#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
 text-decoration: none;
}

.more{
 text-decoration: none;
 color:black;
}

.more:hover{
 color:white;
}

.titles{
 text-decoration:none;
 
}

.parentdiv{
  display:inline-block;
 text-decoration: none;
 
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
   text-decoration:none;
  }
}

.underline{
 text-decoration: none;
}

<section id="skills">
<div id="recentwork">
  <h2 id="recent"> Most Recent Work</h2>


 <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<div class="underline">
<h3 class="titles"> Web Design</h3></div>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Photography</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Print</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Logos</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  

</div>
</section>

The underline is caused by the `a` add `text-decoration:none` to it — Akshay, Feb 20 '17 at 15:43
wow I feel really stupid.. I suppose it is just one of those days.. Thanks @Akshay — Cakers, Feb 20 '17 at 15:44
Always use web debug tools like chome inspect tools, choose Your element, then go to 'computed' to see where each value is set — Mike B, Feb 20 '17 at 15:45

score 2 · Answer 1 · answered Feb 20 '17 at 15:44

add text decoration none to a tag

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
 text-decoration: none;

}

#recent{
 padding:20px;
 text-decoration: none;
 
}
#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
 text-decoration: none;
}

.more{
 text-decoration: none;
 color:black;
}

.more:hover{
 color:white;
}

/* here is the change */
/* apply text decoration none to anchor tag */
a{
 text-decoration:none;
 
}

.parentdiv{
  display:inline-block;
 text-decoration: none;
 
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
   text-decoration:none;
  }
}

.underline{
 text-decoration: none;
}

<section id="skills">
<div id="recentwork">
  <h2 id="recent"> Most Recent Work</h2>


 <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<div class="underline">
<h3 class="titles"> Web Design</h3></div>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Photography</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Print</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Logos</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  

</div>
</section>

Plenarto · Answer 2 · 2017-02-20T15:52:30.120

2

You have to add text-decoration directly to a tag - not to a div your a is located in.

You may target all a tags inside your whole section in a way shown below:

#skills a {
    text-decoration: none;
}

edited Feb 20 '17 at 15:52

answered Feb 20 '17 at 15:46

Plenarto

639
3
16

score 1 · Answer 3 · answered Feb 20 '17 at 15:45

Just a{text-decoration:none} is enough.

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

a {
  text-decoration: none;
}

#recent {
  padding: 20px;
}

#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
}

.more {
  color: black;
}

.more:hover {
  color: white;
}

.parentdiv {
  display: inline-block;
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
  }
}

.underline {}

<section id="skills">
  <div id="recentwork">
    <h2 id="recent"> Most Recent Work</h2>


    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <div class="underline">
          <h3 class="titles"> Web Design</h3>
        </div>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>

    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Photography</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>


    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Print</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>

    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Logos</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>


  </div>
</section>

score 0 · Answer 4 · answered Feb 20 '17 at 15:44

0

Use this

.parentDiv a { text-decoration: none; }

Should fix the problem.

answered Feb 20 '17 at 15:44

Oke Tega

850
10
21

Can't get rid of link underline

4 Answers4