Nodes with dynamically generated labels (eg. figure number)

I have a figure and figcaption nodes in my schema. The figcaption node allows only single paragraph as a content. So let’s say user inserts a figure and label it This is a figure that shows.... What I want to do is to automatically add Fig. 1. (as span) to the figcaption content (the provided paragraph). What is the easiest way to insert this extra span to the paragraph content? I want to make these two parts behave as a single part so that they looks like it’s a single paragraph with the difference that Fig. 1 is populated automatically and not inserted by the user. What would be the recommended way? I would like to avoid keeping Fig. 1. completely as a different node as that would lead to some styling issues and need to use some flex layouts etc to make them look like a single pararaph

A CSS :before rule that uses attr(...) in its content property might be able to do this.