Grouped list of elements by arbitrary attribute with CSS

I'm trying to visually group a list of elements by creating a header above each break in a sequence of attributes. I was able to accomplish this when the group names are known in advance. But what if I want to support an unknown multitude of bands? Is it possible to detect a match when the actual value of an attribute is a variable?

This is how it currently works with predefined attribute values. It's not very extensible.

https://jsfiddle.net/6g7qesja/1/

CSS

.item:first-child:before,
.item:not([data-group="First Group"]) + .item[data-group="First Group"]:before,
.item:not([data-group="Second Group"]) + .item[data-group="Second Group"]:before,
.item:not([data-group="Third Group"]) + .item[data-group="Third Group"]:before {
    content: attr(data-group);
    display: block;
    font-weight: bold;
}

      

        
        
        
      

    

Html

<div class="item" data-group="First Group">one</div>
<div class="item" data-group="First Group">two</div>
<div class="item" data-group="First Group">three</div>
<div class="item" data-group="Second Group">four</div>
<div class="item" data-group="Second Group">five</div>
<div class="item" data-group="Second Group">six</div>
<div class="item" data-group="Third Group">seven</div>
<div class="item" data-group="Third Group">eight</div>
<div class="item" data-group="Third Group">nine</div>

      

        
        
        
      

    

RENDERS

First group

one

two

three

Second group

four

five

six

Third group

seven

eight

nine