Question

Im trying to achieve a heading effect link on bbc: http://www.bbc.co.uk/

scroll down to most popular/whats on/explore

I’m after an effect where the heading is with text on the left and the arrow on the right.
and on hover both change color.

how can it be done so the heading fills the container and has the behaviour described?

thanks

Answer 1

You can use floats to make the arrow stick to the right side by floating it to the right

.arrow { float:right; }

For the color change you will need to change the contained elements when the mouse is hovered on the container

.container:hover .title, .container:hover .arrow { color:green; } 

You can check my example here.

Update

Working with hyperlinks does not make it any different. All you have to do is wrap the two containers inside a hyperlink and then apply changes to the hyperlink like
http://jsfiddle.net/pZtGw/3/

The new html markup would look similar to this

<div class="container">
    <a href="your_link_here">
         <div class="title"> This is a title </div>
         <div class="arrow"> > </div>
    </a>
</div>

And instead of applying the color change to the two contained elements, we change the hyperlinks color property through our CSS flie

.container:hover a { color:green; }