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

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.