How to divide text into two separate pieces within the same div

I’d like to have three words with a full stop after each word. How can I structure the html so that the text and full stop are included within each separate div but where the full stop can be targeted by a different selector. The reason is I’d like to have the color of the full stop different to the colour of the text, and can only do this if I define different target selectors. So far I have:

<div class="sometext">some 
text</div>
<div class="sometext1">some 
text</div>
<div class="sometext2">some 
text</div>
<div class="full stop">. 
</div>
<div class="full stop1">. 
</div>
<div class="full stop2">. 
</div>

Is possible to even write it all in a simpler, better way?

So some text in black, full stop red, some text black, full stop yellow, some text black, full stop green, without having to write it all as separate divs.

<style>
   .sometext {
      color: black;
   }

   .red {
      color: red;
   }

   .yellow {
      color: yellow;
   }

   .green {
      color: green;
   }
</style>

<div class="sometext">some text<span class="red">.</span></div>
<div class="sometext">some text<span class="yellow">.</span></div>
<div class="sometext">some text<span class="green">.</span></div>

[class^="some"]:after{content:'.'}
.black:after{color:black}
.yellow:after{color:yellow}
.green:after{color:green}

<div class="sometext black">some text</div>
<div class="sometext yellow">some text</div>
<div class="sometext green">some text</div>

<style>
    .sometext span {
        // whatever css you want applied to the full stop
    }
</style>
<div class="sometext">some text<span>.</span></div>
<div class="sometext">some text<span>.</span></div>
<div class="sometext">some text<span>.</span></div>