This is more of a general CSS question which we don’t typically field on the forum but the cause of this is that content is the unicode code point for a bullet (the circle) and color turns it blue. All of this is done ::before the actual list elements and this pushes them to a new line.
Might want to try something like this instead: How To Change Bullet Color of a List