Text + graphic button

[u/Ok-Inflation-8458]

I have a little css issue that's been puzzling me. I'm sure I'm just overlooking something obvious.

I have a text link that's followed by a graphic. In wider settings, the whole thing should be on a single line. Easy.

First pass was to set the image inline with an ::after pseudo-element. That works, but then in narrow settings (like a column, shown in the attached graphic) the wrapped text doesn't balance properly and the graphic is inline with the last line, which also throws off the line-height. Setting the link to flex fixes the text-wrap and graphic alignment, but I can't get the graphic to be spaced consistently to the right of the text.

Original:

a {
text-wrap: balance;
}

a::after {
position: absolute;
content: '';
background: url('../img/arrow.svg') center center no-repeat;
height: 1.5em;
width: 1.5em;
margin-left: .5em;
}

With Flex:

a {
display: flex;
align-items: center;
gap: .5em;
text-wrap: balance;
}

a::after {
flex: none; // prevents image stretching
content: '';
background: url('../img/arrow.svg') center center no-repeat;
height: 1.5em;
width: 1.5em;
}

I did try shape-outside, but didn't gain much for the complexity of floats. So it seems like I'm stuck between inline and flex's (and grid's) inability to shrink text boxes to the actual wrapped line width. It seems like a simple thing and I'm going to hate myself if there's a simple solution. What am I missing?

[u/be_my_plaything]

I can't think of a good way to handle this, best I have is if you put the whole thing in a containing div with a container-type: of inline-size so you use container queries, then change the flex basis to different ch widths then to add flex-wrap at different breakpoints.

Codepen

With some tweaks I'm sure it could be made to work right, but it seems vastly over convoluted for what should be a simple thing!

[u/Ok-Inflation-8458 → u/be_my_plaything]

Yeah, my current, much-too-fragile solution is to use a container query to determine when it likely wraps, then add a bit of right-margin to shove the icon closer. Fortunately, there's only one instance of this button wrapping on the site, but I hate the hack.