Border de solo una parte del div

[dryant]

Hola
Tengo un menu el cual tiene que tener un 100% del ancho.
Sin embargo quiero que éste menu esté subrayado solo un poco mas del ancho que ocupa.
En esta imagen se puede ver un ejemplo de lo que quiero:



Si no se ve la imagen, se puede ver tambien aqui: https://www.dropbox.com/s/79ome2pl5j...34.36.png?dl=0

La estructura es esta:

Código PHP:

  <div class="menuprincipal">
    <nav class="menu">
        <li>inicio</li>
    <li>Blog</li>
    <li>noticias</li>
    <li>acerca de </li>
    <li>contacto</li>
    </nav>
</div> 
   

¿Como podría hacer esto sin modificar el width del menu?

[diegoguerrero]

Hola!!

Prueba a buscar en Internet el comportamiento del css :after . Yo te lo explicaría, pero estoy muy ocupado.
¡Saludos!

[dryant]

Hola diego!
Sé lo que es el after y el before, pero no se me ocurre como aplicarlo a este caso....
Con muchos espacios y éstos subrayados por ejemplo?
Gracias!

[rodrypaladin]

puedes hacer un div en el que meter el contenido, al ancho que necesites, y a ese div metele un border-bottom: solid 1px #COLOR

[Amiancht]

Es muy sencillo.
Solo tienes que ponerle al div el ancho que quieres que ocupe ese borde.
Añadirle el border-bottom tal como lo quieras.
Y los elementos del menu (los links) alineados al centro (text-align: center) si son elementos inline o inline-block funcionara bien.

Los elementos no tienen porqué ocupar todo el ancho del div.

Editado:
acabo de leer que no quieres modificar el ancho del menu.
Puedes meter el menu, en otro div que sea el que tenga el border-bottom.

Otra opción puedes hasta incluso despues añadir un <hr>
fuera del menu con el ancho que quieras darle.