Question

I’m trying to add colored sidelines to a headline on a page using CSS, this is what I’ve come up with so far (using LESS hence the nested properties) –

h2 {
    font-size: 2em;
    color: @black;
    position: relative;
    text-transform: uppercase;
    &:before {
        position: absolute;
        top: 1em; // 50% of h2 font-size
        left: 100px;
        content: '';
        border-bottom: 1px solid @orange;
        width: 100px;
    }
    &:after {
        position: absolute;
        top: 1em;
        right: 100px;
        content: '';
        border-bottom: 1px solid @orange;
        width: 100px;
    }
}

This gives me a line at the bottom (using border-bottom property) on both sides of the headline, but I want them to be vertically centered to the headline’s height. Any ideas?

Answer 1

Use position:relative, on your H2 and use position:absolute with the proper top/left/right/bottom for your :before and :after.