vince falconi

@milesj -- I agree, I meant you'd use a header element to wrap the two headings rather than an hgroup.

@napotopia -- Maybe I'm just misunderstanding by what you're calling "labels." Generally, when people refer to "labels" I see a form of taxonomy for some kind of content. Ex: Gmail tags or whatever they're called.

Actually, @milesj, the W3C dropped the hgroup tag, so you'd just wrap the headings in a header. But there's a couple things about this that make me raise my eyebrow a little.

1) In your use-case example, the markup is off. Those labels really ought to be lis in an ul for the purposes of semantics. Default UA styles for a ul are exactly what you're aiming for here, in the end.

2) In a use-case situation where (1) doesn't apply*, why use pseudo-elements + content when display:block applied to that span would suffice? I see that you don't want to change the display property, but in trying to avoid something that (which confuses me further--there's no inherent problem with changing the display property), you add extra code. I mean, we could be talking mere bytes in this case, but still.

*The only use-case I could come up with is a situation where you want a heading to break a line for design purposes. span is correct in this case because it has no semantic value and will degrade elegantly.

Well, @potherca, I'm not familiar with the xDebug extension. Thanks for that, though.

For what it's worth, on the topic of non-native solutions, I've found using Chrome Logger (http://craig.is/writing/chrome-logger) really helpful, outputting things to the Chrome dev console.