Styling Issue: text-decoration none is not working

November 19, 2021

So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn’t worked.

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item{
  text-decoration: none;
  color: inherit;
}

<footer>
     <div class="container-fluid custom-footer">
       <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
       </div>
       <div class="row">
         <div class=" col footer-column px-4">
           <h6>Company</h6>
           <ul class="list-items">
             <li class="company-item"><a href="">Become a rider</a></li>
             <li class="company-item"><a href="">Our Story</a></li>
             <li class="company-item"><a href="">Our Team</a></li>
             <li class="company-item"><a href="">Contacts</a></li>
             <li class="company-item"><a href="">Partners</a></li>
           </ul>
         </div>
         <div class="col footer-column">
          <h6>Product</h6>
          <ul class="list-items">
            <li class="product-item"><a href="">Ride safely</a></li>
            <li class="product-item"><a href="">How it works</a></li>
            <li class="product-item"><a href="">testimonials</a></li>
          </ul>
         </div>
         <div class="col footer-column contacts">
          <p>+254 111 220 055</p>
          <p>info@tissboda.com</p>
          <p>Nairobi, Kenya</p>
         </div>
       </div>
       <div class="row">
         <div class="col px-4">
           <ul class="list-items">
             <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>

           </ul>
         </div>
         <div class="col"></div>
         <div class="col">
           <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>

       </div>
       <div class="row">
        <div class="col px-4">
          <p>©2021 TissBoda. All Rights Reserved</p>
        </div>
        <div class="col"></div>
        <div class="col d-flex">
          <ul class="list-items">
            <li class="legal-link"><a href="">Privacy</a></li>
            <li class="legal-link"><a href="">Terms</a></li>
          </ul>
        </div>
       </div>
     </div>
   </footer>

‘none’ option.

>Solution :

Give it to the a-element

.company-item a {
  text-decoration: none;
  color: inherit;
}

This would be your code:

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item a{
  text-decoration: none;
  color: inherit;
}

<footer>
     <div class="container-fluid custom-footer">
       <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
       </div>
       <div class="row">
         <div class=" col footer-column px-4">
           <h6>Company</h6>
           <ul class="list-items">
             <li class="company-item"><a href="">Become a rider</a></li>
             <li class="company-item"><a href="">Our Story</a></li>
             <li class="company-item"><a href="">Our Team</a></li>
             <li class="company-item"><a href="">Contacts</a></li>
             <li class="company-item"><a href="">Partners</a></li>
           </ul>
         </div>
         <div class="col footer-column">
          <h6>Product</h6>
          <ul class="list-items">
            <li class="product-item"><a href="">Ride safely</a></li>
            <li class="product-item"><a href="">How it works</a></li>
            <li class="product-item"><a href="">testimonials</a></li>
          </ul>
         </div>
         <div class="col footer-column contacts">
          <p>+254 111 220 055</p>
          <p>info@tissboda.com</p>
          <p>Nairobi, Kenya</p>
         </div>
       </div>
       <div class="row">
         <div class="col px-4">
           <ul class="list-items">
             <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>

           </ul>
         </div>
         <div class="col"></div>
         <div class="col">
           <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>

       </div>
       <div class="row">
        <div class="col px-4">
          <p>©2021 TissBoda. All Rights Reserved</p>
        </div>
        <div class="col"></div>
        <div class="col d-flex">
          <ul class="list-items">
            <li class="legal-link"><a href="">Privacy</a></li>
            <li class="legal-link"><a href="">Terms</a></li>
          </ul>
        </div>
       </div>
     </div>
   </footer>