Google+ like border

Question

I want to understand how Google+'s stream items border-left works? Can every body explain it or suggest any link and/or article?

More: When you focus on a stream, you'll see that the left-border of stream gone to blue, and when you focus on another stream, the border will animate to new focused item.

1. focus on element a
2. a's left-border gone to blue
3. focus on element b
4. the blue-border animate to element b's left-border

Thanks to any suggestion.

Answer 1

there you go: http://dev.pierre-cholhot.com/gplus-border.html

Answer 2

Here's one if you don't want to use jQuery and only target the latest browsers.

Demo: http://jsfiddle.net/ThinkingStiff/9UUb9/

HTML:

<div id="posts-frame">
    <div id="highlight"></div>
    <ul id="posts">
        <li class="post">post one</li>
        <li class="post">post two</li>
        <li class="post">post three</li>
        <li class="post">post four</li>
    <ul>
</div>

CSS:

#highlight {
    border-left: 1px solid #4D90F0;    
    height: 0;
    margin-left: 1px;
    position: absolute;
    top: 0;
    transition:             top 200ms ease, height 200ms ease;
        -moz-transition:    top 200ms ease, height 200ms ease;
        -ms-transition:     top 200ms ease, height 200ms ease;
        -o-transition:      top 200ms ease, height 200ms ease;
        -webkit-transition: top 200ms ease, height 200ms ease;
}

.post {
    border: 1px solid lightgray;
    display: block;
    height: 45px;
    padding-left: 4px;
}

.post:nth-child( 2 ) {
    height: 70px;    
}

#posts {
    padding: 0;
    margin: 0;  
    width: 400px;
}

#posts-frame {
    position: relative;       
}

Script:

function selectPost( event ) {

    var highlight = document.getElementById( 'highlight' );
    highlight.style.height = event.target.clientHeight + 'px';
    highlight.style.top = ( event.target.offsetTop + 1 ) + 'px';

};

document.getElementById( 'posts' ).addEventListener( 'click', selectPost, false);