make heading stretch to fit containe and add > to end

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

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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; }

Thank, i needed the whole panel clickable really. this helped: http://stackoverflow.com/questions/796087/make-a-div-into-a-link — raklos, Feb 18 '12 at 16:53

score 0 · Answer 2 · answered Feb 18 '12 at 16:39

http://jsfiddle.net/2yYyL/1/ here is an example on jsfiddle what you want to do is add a sudo class of :hover on the wrapper and change the color of the text then have a have a sudo class of :hover on the parent element of a span like so

div:hover span{ background-image:url();}

so when you hover over the parent element it changes the background image of the child element

make heading stretch to fit containe and add > to end

2 Answers2

Update