How to make a round logo with an underline, cross-browser?

Question

css

Have a nice day/evening/night everyone)
There is such a problem to the

right of the name of another 9 different points (collected on flex, there is no template grid due to trickery)
the horizontal strip is supposed to be full width for any monitor size.
the main headache is how, with a smooth change in the browser window, to achieve the coincidence of the logo, semicircle and horizontal strip, and with cross-browser compatibility
Thank you all)

Answer 1

The circle and arc below are svg, flat they are 99999px wide pseudo-elements. You can do without svg, but then you have to make several wrappers for the circle, in order to first display the round stroke, then white, then cover the round to be an arc.

Answer 2

pure css. Dimensions and positioning can be customized. And this is not the only way, just the easiest.

Answer 3

It will probably sound crazy, but just don't do it.
The headache must be justified, in this case this thing can be replaced by any other less hemorrhoidal thing without losing anything at all.
Yes, communication with the designer is also part of the layout designer's work.