Раздвижная дверь с хвостом

Question

У меня есть <H2> с фоном, который имеет закругленные углы. Я ищу способ создать линию 1px, которая перемещается от поля к концу контейнера справа. У кого-нибудь есть идея?

Answer 1

Ну, я наконец сдался и воткнул несколько div в мой h2. (

CSS

#content h2 {
    background: url(../images/bg-page-title.png) -900px 0px no-repeat;
    font: 1.4em Georgia, Times, Arial bold;
    height: 40px;
    margin: 0px 20px;
    text-transform: uppercase;
}

#content h2 .head {
    background: url(../images/bg-page-title.png) no-repeat;
    float: left;
    padding: 8px 20px;
    height: 100%;
}

#content h2 .tail {
    background: url(../images/bg-page-title.png) -857px 0px no-repeat #ffffff;
    float: left;
    height: 100%;
    width: 15px;
}

HTML

<h2>
    <div class="head">Find A Job</div>
    <div class="tail">& nbsp;</div>
</h2>

Answer 2

Включить строку в фоновое изображение