html - svg image beneath text (text decoration)

Question

I'd like to add an SVG image of a curly bracket beneath and between two words just like in the image below.

Since I'd like it to be responsive I thought to include the image directly in the HTML in a span tag between the two words - but this just creates a gap between the words (expected).

What's the best way to do this? I wish there was a way to add an image to the text-decoration-style attribute.

forgive me if this has been asked before -- designer looking to improve html/css

question from:https://stackoverflow.com/questions/65878014/svg-image-beneath-text-text-decoration

Answer 1

You can set the padding-top and bottom of the curly bracket to a negative value. But I am not sure if it is the best way though.