Multiline underlined button

Question

I am having issues with underlining button text using box-shadow and wrapping it on multiple lines. It should be solved using just CSS.

Needs to use the following HTML (can't add HTML tags, special characters etc.):

  <button class="button">
    <span class="button__inner">
      <span class="button__text">
        Button with very very very long example text
      </span>
      <svg class="button__icon" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
      </svg>
    </span>
  </button>

Visually it should look like this!

Requirements:

1. Use box-shadow to underline text on multiple lines.
2. Do not add additional HTML (needs to use HTML structure provided above).
3. .button__inner has to be display: flex or inline-flex.
4. The icon needs to be aligned right (in its own column), vertically centered and not have underline.

.button {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
}
.button:focus {
  outline: none;
}

.button__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.button__text {
  box-shadow: inset 0 -1px currentColor;
}
.button:hover .button__text {
  box-shadow: none;
}

.button__icon {
  width: 1em;
  height: 1em;
}

p {
  font-size: 14px;
  line-height: 1.2em;
}

<div style="max-width: 200px">

  <p>
    Following button using correct HTML, however box-shadow does not underline correctly on multiple lines. The icon needs to be on the right in its own column so therefore adding display: inline; to .button__inner is not an option.
  </p>

  <button class="button">
    <span class="button__inner">
      <span class="button__text">
        Button with very very very long example text
      </span>
      <svg class="button__icon" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
      </svg>
    </span>
  </button>

  <p>
    Below is the visually desired result, however it uses an additional span element. How to achieve this using just CSS and without altering the HTML?
  </p>

  <button class="button">
    <span class="button__inner">
      <span>
        <span class="button__text">
          Button with very very very long example text
        </span>
      </span>
      <svg class="button__icon" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
      </svg>
    </span>
  </button>
</div>

Is this even possible using just CSS?

Answer 1

Does it work in your case to use text-decoration: underline instead of box-shadow? like this example: https://codepen.io/annaazzam/pen/PoZEJwX