Multiline underlined button - css

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:
Use box-shadow to underline text on multiple lines.
Do not add additional HTML (needs to use HTML structure provided above).
.button__inner has to be display: flex or inline-flex.
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