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

Question

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.

Answer 1

If you want different colours you'll have to have the full stops in span tags and have classes or id's for each span tag.

<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>

Answer 2

Place everything inside one div and then wrap each sometext and fullstop in their own span. To be clear you should have a total of 6 spans. If all the sometext are to be styled the same and all the fullstops are to be styled the same use a class for the text spans and a different class for the full stop spans

Answer 3

<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>

Answer 4

You can use ::after selector to add full-stop sign after all divs. For example:

[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>