CSS3: keeping :after and :before elements aligned with the element's height

Question

Im having a big headcache with a header design:

Here the demo: http://jsfiddle.net/uGECm/

The idea is to have the gray label that 'wrap' the element; However, the label's height is unknow (it can vary by its content) - my problem is that the 2 pseudo-elements made like triangles get a wrong position if the labels change the size, this becose they're position is relative.

Any idea?

ps: im looking for a no-js and no-images solution.

Answer 1

section h2:before, section h2:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0 0 -10px 0;
}

section h2:before {
    content: '\0000a0';
    border-left: 10px solid transparent;
    border-top: 10px solid #323232;
}

section h2:after {
    content: '\0000a0';
    border-right: 10px solid transparent;
    border-top: 10px solid #323232;
    right: 0;
}​

Here's a fork with some further CSS formatting: http://jsfiddle.net/bqXeJ/

It's worth taking a look at a style guide like the one I wrote here, and also, if you use Lea Verou's prefixfree.js, you can skip writing declarations for each browser vendor.

Answer 2

You can position the pseudoelements absolutely. Since section h2 is position: relative, setting them to top: 100% will keep them stuck at the bottom, regardless of the parent's size:

section h2:before, section h2:after {
  position: absolute;
  top: 100%;
}