LiveWithPassion LiveWithPassion - 5 months ago 19
CSS Question

Cannot remove text decoration underline

I cannot remove the

underline
from the following. I've tried setting
text-decoration: none
on all three classes as well.



rs-friends-list-row {
position: relative;
display: flex;
flex-direction: row;
padding: 10px 20px 10px 20px;
font-size: 10px;
}
a .rs-friends-list-row {
text-decoration: none;
}
a:hover .rs-friends-list-row {
background-color: yellow;
}

<a href="#">
<div class="rs-friends-list-row">
<div>
<img class="rs-friends-user-image" src="assets/images/profileimg1.png" alt="img">
</div>
<div class="rs-friends-details"><span class="right-sidebar-friends-name">Lucile B. Nash</span>
<br>Nanaimo</div>
<div><span class="rs-friends-status online"></span>
</div>
</div>
</a>




Answer

text-decoration only applies to a and you are applying to child of a (the div), you need to apply to a (with class or not)

.rs-friends-list-row {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 10px 20px 10px 20px;
  font-size: 10px;
}
.some-class {
  text-decoration: none;
}
a:hover .rs-friends-list-row {
  background-color: yellow;
}
<a class="some-class" href="#">
  <div class="rs-friends-list-row">
    <div>
      <img class="rs-friends-user-image" src="assets/images/profileimg1.png" alt="img">
    </div>
    <div class="rs-friends-details"><span class="right-sidebar-friends-name">Lucile B. Nash</span>
      <br>Nanaimo</div>
    <div><span class="rs-friends-status online"></span>
    </div>
  </div>
</a>

Comments