Effects on links through the Hover

Question

Guys, can anyone tell me how I do this effect with hover? When passing the mouse over the menu link it appears that vertical line on the name, I could only with the horizontal line below the name.

Or else tell me where I find examples, I found nothing about it.

Answer 1

You can put a span invisible inside each link that will only appear when the mouse passes over the link.

CSS:

body{ background: #000;}
a{ color: #fff;}
li{ padding: 0px; margin: 0px; list-style: none; display: inline-block; float: left; margin: 10px; position: relative;}
ul{ padding: 0px; margin: 0px;}
li span{
    display: none; width: 1px; background: #fff; position:absolute; bottom: 100%; height: 1000px; left: 50%; margin-left: -1px;
}

li:hover span{ display: inline-block;}

HTML:

<ul>
    <li>
        <a href="">Link1</a>
        <span></span>
    </li>
    <li>
        <a href="">Link2</a>
        <span></span>
    </li>
</ul>

Fiddle: https://jsfiddle.net/vqfr54w4/