-1

tengo el problema de que debo hacer el menu con un punto antes de una linea en un elemento li, como en la foto que os dejo. introducir la descripción de la imagen aquí

Alguien sabe si esto se puede hacer?. Vamos la linea si, pero el punto antes?.....es que no me viene a la cabeza como

Un saludo

5
  • 3
    Por favor, podrías agregar tu HTML y CSS? Así vemos cómo modificarlo. Commented el 13 nov. 2018 a las 15:23
  • ¿Lo has visto en alguna página o solo en imagen? Inspeccionando el HTML puedes ver como lo hicieron
    – Diego
    Commented el 13 nov. 2018 a las 15:38
  • 1
    Hay muchas formas, con css, con imagenes, etc..
    – JDev
    Commented el 13 nov. 2018 a las 15:48
  • Ojala lo hubiera visto..me ahorraba preguntar....pero me llego la persona con esto....y me quede en blanco...mira que le he dado vuelta. Esa imagen es sacada de un pdf que me dieron...
    – Dario B.
    Commented el 13 nov. 2018 a las 18:25
  • Si te ha servido mi respuesta más abajo, por favor, marcala como solucionada
    – Pelukosa
    Commented el 14 nov. 2018 a las 8:44

1 respuesta 1

2

Es una solucion "poco elegante" pero funcional, espero que te sirva

@import url('https://fonts.googleapis.com/css?family=Roboto');
li{ 
  display: inline-block; 
  padding: 5px 10px; 
}
.text{ 
  width:100%; 
  padding:0; 
  color: #0F84FF;
  margin: 5px auto;
  font-family: 'Roboto', sans-serif;
}
.dot{ 
  width: 3px; 
  height: 3px; 
  float:left; 
  border-radius: 100%; 
  background:#FFB61D; 
  position:relative; 
}
.sub{ 
  width: calc(100% - 10px); 
  margin-left: 10px; 
  height: 2px; 
  background:#0F84FF;
  position:relative; 
}
<ul>
  <li> 
<p class="text">Home</p> 
<div class="dot"></div> 
<div class="sub"></div> 
  </li> 

  <li> 
<p class="text">Product</p> 
<div class="dot"></div> 
<div class="sub"></div> 
  </li> 

 <li> 
<p class="text">Contact with us</p> 
<div class="dot"></div> 
<div class="sub"></div> 
  </li> 
</ul>

1
  • Buenas telef. Solo podemos dejarle comentarios y esperar a que él la acepte. No se puede hacer más. Respecto a tu respuesta, has de explicar mejor como funciona tu codigo ya que tal y como está solo sirve para copiar y pegar, no entender. Evita en el futuro responder a preguntas de baja calidad que no muestran intentos o explicacion detallada. Un saludo
    – lois6b
    Commented el 19 nov. 2018 a las 9:49

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.