The answer from Fernando is basically correct. Some properties have been added to allow line size adjustment:

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 goes the JSFiddle with the simulation.

I have prepared a version where you can control various features of the trace and other elements with CSS, so as 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 enter any foreign characters 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 at JS Fiddle

I would solve this problem using Pseudo CSS Classes and Pseudo Elements . Using the pseudo: : hover , :: after , and :: before .

Would create a rule similar to this:

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

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

And would format the content as needed;

Follow a online example .

Example 2 , controlling the positioning of the stroke.

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

I understood, from what I saw, you'll have to have two strokes even, it might be with float: left, something like this:

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

Do not use span to create a new class.

You can do with spaces and line-through in hover , like this:

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 in JSFiddle

First of all, I thank all those who came forward to help me. I chose the @OnoSendai answer using 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>