CSS effect on hover (dashed underline + change of text color)

Question

I'm totoal CSS noob

Can you please take a minute and help me create dashed underline (with gap) with text color change on mouse hover?

I would really appreciate your help!

http://i.imgur.com/2JjFYWT.jpg
http://codepen.io/anon/pen/lIjDp (please, dont mind some unneccessary CSS code there)

THANKS A TON!

Answer 1

Try:

#zed h1:hover{
    border-bottom:5px dashed yellow;
    color:orange;
}

DEMO here.