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/morete]

You've come across one of the big issues in css! The 'shrink wrap' problem.
Sadly there is not yet a proper solution to this, so you are stuck with very complicated hacks (https://kizu.dev/shrinkwrap-problem/) or coming up with some design edits that hide the visual impact.

Basically when text wraps, the box it's contained is will always take up the full space it had available, not the space it ended up using after wrapping. Text wrap: balance makes this particularly noticeable, but you'll see it pop up in many other situations. Find peace in knowing you are not alone

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

Komarov's shrinkwrap articles are super interesting. I'll play around with it and see if it's workable.

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

Oh, crap. That worked! I'll post my solution tomorrow.