Lucas
¿Cómo puedo hacer puntos entre enlaces centrados verticalmente con solo CSS? Es posible, pero no puedo averiguar cómo hacerlo.
Esperado:
HTML
<label><a href="#">Like</a></label>
<label><a href="#">Comment</a></label>
<label><a href="#">Share</a></label>
<label><span>1 hour ago</span></label>
CSS
a{
vertical-align: middle;
}
label:not(:last-child):after{
content: " . ";
}
Ejemplo que no funciona: http://jsfiddle.net/4ZFMm/
¡Gracias!
sachleen
Usar · · por un punto o • • para un punto de estilo de lista con viñetas más grueso.
Para uso en el content atributo, deberá escapar de él:
punto medio:
content: " \B7 ";
toro:
content: " \2219 ";
Referencias:
- Agregar entidades HTML usando contenido CSS
- 24.2.1 La lista de caracteres – Referencias a entidades de caracteres en HTML 4
-
buena respuesta, gracias. pero todavía no puedo conseguir el middot justo en el medio jsfiddle.net/4ZFMm/1
– Lucas
25 de octubre de 2012 a las 3:28
-
Está en el medio, en el medio de la línea. Lo quieres ligeramente por debajo del medio. Padding/margin/lineheight no funcionará aquí… haga clic derecho en Facebook y vaya a Inspeccionar elemento (Chrome), le dará el estilo para el elemento para que pueda ver cómo lo hacen. Supongo que también podrías hacerlo con una imagen bg.
– sachleen
25 de octubre de 2012 a las 3:32
-
En realidad, después de una inspección más cercana, para mí está al mismo nivel que su captura de pantalla. (Cromo, Win7)
– sachleen
25 de octubre de 2012 a las 3:33
-
@Luccas, tu violín lo desplaza. Solo quita el
vertical-alignajustes, y el punto medio aparecerá en su lugar correcto, verticalmente en el medio de la altura x.– Jukka K. Korpela
25 de octubre de 2012 a las 5:50
-
¿Cómo hacer que la bala sea más grande?
– lagartija
18 de enero de 2016 a las 8:52
De alguna manera, estos se estropearon en el servidor en vivo, aunque funcionaban localmente, esto es lo que funcionó para mí, tal vez ayude a alguien más:
.element:before {
content: "\2022";
}