Text Link applying decoration within a flex-CodePudding

I have a button set up like this:

<a href="*LINK*"><button type="submit" ><img src="/assets/thumb.png"><span >YouTube</span></button></a>

After applying styles, it looks something like this.

However, when I apply display: flex to the button it functions as intended, but it shows the underline on the text.

I've tried setting text-decoration to none but it's still showing up, any idea why?

CodePudding user response：

It seems like something got mixed up in your style. Actually, it should work quite easily and flex definitely has no effect on the anchor style within a flex container. Example below:

.flex {
  display: flex;  
  align-items: center;
  border: 1px solid #000;
  border-radius:20px;
  width: 300px;
  margin:auto;
  gap:10px;
}

.flex a {
  text-decoration: none;
}
.flex img {
  border-radius:20px 0px 0px 20px;
}

<div>
  <div >
    <img src="https://via.placeholder.com/200">
    <a href="">link</a>
  </div>
</div>