Удалите подчеркивание из интервала, когда вертикально и горизонтально центрированы с помощью flex

Question

Тег должен быть подчеркнут, однако тег span не должен быть подчеркнут.

Это решение не работает в моем случае: https://stackoverflow.com/a/13856365/11106685 как я центрировал тег с помощью 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

Удалить подчеркивание из тега a, обернуть содержимое, чтобы подчеркнуть его в промежутке, и добавить подчеркивание к этому определенному промежутку.

Вот рабочий пример https://jsfiddle.net/whnbLfuo/

Тег a долженОднако следует подчеркнуть, что тег span не следует подчеркивать.

Это решение не работает в моем случае: https://stackoverflow.com/a/13856365/11106685, поскольку я центрировал тег с помощью 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>