html - Clever grouping similar items via CSS -

html - Clever grouping similar items via CSS -

i've been trying grouping items via cs in automatic , clever way. here first demo content:

http://cssdeck.com/labs/ppqszxgb

i've created custom attribute each div. those custom attributes not pre-defined, they're populated during page creation.

upon creation, read attribute , utilize :before css selector set "title" each element, follows:

div:before{ content: attr(att); font-size: 12px; display: block; }

however, don't want give title each item. want utilize pseudo element first item of each group; preferably resulting close this:

http://cssdeck.com/labs/pxugtput

is possible css-only? of not, what's best option?

it's not pretty, job done. set of elements unordered list items according groups. , set li:first-child:before content set.

here code wrote out: http://cssdeck.com/labs/hhvmvhyg

don't know if solution seeking.

html css html5 css3