How to remove the text-decoration underline on a flex child when the parent is the anchor?

Question

I am trying to remove the text-decoration of a flex child when the parent is the anchor. I've tried all of the following code, and it is not working at all. I've created a jsFiddle, and on that the underline shows all the time and not on hover. In my WordPress installation, it only shows on hover. I'm really not sure what to do! Any help is appreciated!

Thank you ahead of time!!!!

    .fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover, 
.fleximagebox_link a:hover, .fleximagebox_link:hover a, 
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a, 
a .image_background:hover, .image_background.fleximagebox_link a:hover, 
a .image_background.fleximagebox_link:hover {
text-decoration: none!important; 
}

Here is the jsFiddle that explains what I'm talking about: https://jsfiddle.net/Clare12345/th60mde3/2/

Answer 1

This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }

As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }

.flexbox_images a {
  text-decoration: none;
}

.main_box {
  background: white;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.main_box .flexbox_images {
  color: white;
  width: 100%;
  padding: 0px;
  overflow: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flexbox_images a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.image_background {
  height: 250px;
  margin: 0 auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 101%;
}

.image_background_left {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-end;
  margin-right: -1px;
}

.image_background_right {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-start;
  margin-left: -1px;
}

.fleximagebox_link {
  font-size: 28pt;
  background: rgba(255, 255, 255, 0.85);
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 130px;
}

.image_background_left .fleximagebox_link {
  justify-content: flex-end;
  padding-left: 35px;
}

.image_background_right .fleximagebox_link {
  justify-content: flex-start;
  padding-right: 35px;
}

.image_background_right .fleximagebox_link p {
  font-size: 28pt!important;
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin-bottom: 0px;
}

.main_black_bar {
  width: 3px;
  background: #000;
  height: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: -1px;
}

.image_background_left .main_black_bar {
  margin-left: 35px;
}

.image_background_right .main_black_bar {
  margin-right: 35px;
}

<div class="main_box">

  <div class="flexbox_images">
    <a href="">
      <div class="image_background image_background_left">
        <div class="fleximagebox_link">Buy
          <div class="main_black_bar">&nbsp;</div>
        </div>
      </div>
    </a>
    <a href="">
      <div class="image_background image_background_right">
        <div class="fleximagebox_link">
          <div class="main_black_bar">&nbsp;</div>Sell</div>
      </div>
    </a>
  </div>

</div>