Remove underline from a span when vertically and horizontally centered using flex

Question

The a tag should be underlined, however, the span tag should not be underlined.

This solution doesn't work in my case: https://stackoverflow.com/a/13856365/11106685 as I centered the a tag using flex.

https://jsfiddle.net/sebastian3495/sdbuz71v/

html, body {
  width: 100%;
  height: 100%;
}
.wrapper {
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
  display: flex;
}
.center {
  background: lightgreen;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
span {
  display: inline-block;
  text-decoration: none;
}

<div class="wrapper">
  <a class="center" href="https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically">
    Center me <span> <-- </span>
  </a>
</div>

Answer 1

Remove underline from a tag, wrap contents to be underline in a span and add underline to that specific span.

Here is working example https://jsfiddle.net/whnbLfuo/

The a tag should be underlined, however, the span tag should not be underlined.

This solution doesn't work in my case: https://stackoverflow.com/a/13856365/11106685 as I centered the a tag using flex.

https://jsfiddle.net/sebastian3495/sdbuz71v/

html, body {
  width: 100%;
  height: 100%;
}
.wrapper {
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
  display: flex;
}
.center {
  background: lightgreen;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
span {
  display: inline-block;
  text-decoration: none;
}

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

<div class="wrapper">
    <a class="center" href="https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically">
        <span class="underline">Center me</span> <span> <-- </span>
    </a>
</div>