How to create link with Hover showing strokes on the sides

Question

What I wish to do

I want to create a menu and for each link I want to apply an effect "Hover". When the user hovers the mouse will be shown strokes to the sides of the link.

Image Example

Follows here as I am trying to do. When I hover over "home" I wish those 2 lines to appear on the side. I tried to use the <hr> or <span> and did not succeed.

What I’ve already tried

<li>
    <a href="" title="Home"><p><span>__</span>home</p></a>
</li>

I tried to put the span tag next to the p, but the paragraph occupies 100 of the width, so it was on another line, so I tried to put that span next to the paragraph, then it gets glued, but it looks good on the "floor".

Update

<li>
    <a href="" title="Home">
        <div class="traco"></div>
        <div class="textoMenu">home</div>
        <div class="traco"></div>
</li>

<li>
    <a href="" title="Empresa">
        <div class="traco"></div>
        <div class="textoMenu">a empresa</div>
        <div class="traco"></div>
</li>   

CSS

.traco {
    width: 20px;
    height: 1px;
    background-color: transparent;
    float: left;
    margin-top: 8px;                            
}

.textoMenu{
    .colorFonte(@corTodasLetras);
    text-align: center;
    font-family: Georgia;
    font-size: 14px;
    .marginReduzida(0,10px);
    float: left;
}

Now I just need to find a way to center these links.

Answer 1

I have prepared a version where you can control various traits of the dash and other elements with CSS, not to be limited to the width of the "minus sign" or other characters, and have precise control over the design.

The advantage of this solution is that you do not need to insert any strange character in the HTML content, definitely separating the content from the visual.

HTML:

<div id="menu">
    <a href="#">
        <span class="traco"></span>
        <span class="link">HOME</span>
    </a>
    <a href="#">
        <span class="traco"></span>
        <span class="link">CONTATO</span>
    </a>
</div>

CSS:

#menu a {
   display:block;
   position:relative;
   float:left;                       /* somente se o menu for horizontal */
   overflow:auto;
   text-decoration:none;
   color: #422;
   background-color: #422;
}

#menu a span.link {
   position:relative;
   display:block;
   margin: 0 20px;                   /* Largura do traço */
   padding: 0 4px;                   /* Espaço entre o traço e as letras */
   z-index: 10;
   color: #ffe;
   background-color: #422;
}

#menu a span.traco {
   display:block;
   position:absolute;
   width:100%;
   height: 50%;
   z-index: 5;
   border-bottom: 1px solid #422;   /* Espessura do traço */
}

#menu a:hover span.traco {
   border-color: #ffe;              /* Cor do traço */
}

See working on JS Fiddle

Answer 2

I would solve this problem using Pseudo CSS Classes and Pseudo Elementos. Using the pseudos: :Hover, ::after, and ::before.

Would create a rule similar to that:

ul > li > a:hover::after{    
    content : '-';
}

ul > li > a:hover::before{    
    content : '-';
}

And would format the content, as necessary;

Follow here a online example.

Example 2, controlling the positioning of the trace.

To set the row size you can add more "-" in the property content, and decrease the space between letters with the css property letter-spacing, making a continuous dash effect, is an option. Follow here an example.

Answer 3

The response of Fernando is basically correct. Some properties have been added to allow adjustment of line sizes:

ul > li > a {
    display: inline-block;
    background-color: #ccc;
    text-align: center;
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
}

    ul > li > a:hover::after {
        content: "";
        display: inline-block;
        border-top: solid 1px black;
        width: 50px;
        height: 1px;
        top: 50%;
        position: absolute;
        right: 1px;
    }

    ul > li > a:hover::before {
        content: "";
        display: inline-block;
        border-top: solid 1px black;
        width: 50px;
        height: 1px;
        top: 50%;
        position: absolute;
        left: -1px;
    }

Here comes Jsfiddle with the simulation.

Answer 4

I get it, from what I’ve seen, you’re gonna have to have two strokes even, it might be with float:left, something like that:

<div class="traco"></div>
<div class="divDomeio"></div>
<div class="traco"></div>

Do not use span create a new class.

Answer 5

You can do with spaces and line-through in the hover, thus:

HTML:

<ul>
    <li>
        <a href="" title="Home"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>home<span>&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
    </li>
</ul>

CSS:

a span {
    display:inline-block;
    padding: 10px;
}

a:hover span {
    text-decoration:line-through;
}

See working on Jsfiddle

Answer 6

First of all, I thank all those who have come to my aid. Choose the answer from @Onosendai using the pseudo-elements.

Code

CSS

ul > li > a {
    display: inline-block;
    background-color: #ccc;
    text-align: center;
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
}

ul > li > a:hover::after {
    content: "";
    display: inline-block;
    border-top: solid 1px black;
    width: 50px;
    height: 1px;
    top: 50%;
    position: absolute;
    right: 1px;
}

ul > li > a:hover::before {
    content: "";
    display: inline-block;
    border-top: solid 1px black;
    width: 50px;
    height: 1px;
    top: 50%;
    position: absolute;
    left: -1px;
}

HTML

<ul>
    <li><a href="" title="Home">home</a></li>
    <li><a href="" title="A Empresa">a empresa</a></li>
</ul>