etiquetas - Combinar pseudo-elementos CSS, ": después de" el ": último-hijo"
css meaning (8)
Quiero hacer listas "gramaticalmente correctas" usando CSS. Esto es lo que tengo hasta ahora:
Las etiquetas <li> se muestran horizontalmente con comas después de ellas.
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
Eso funciona, pero quiero que el "último hijo" tenga un punto en lugar de una coma. Y, si es posible, me gustaría poner "y" antes del "último hijo" también. Las listas que estoy diseñando se generan dinámicamente, por lo que no puedo simplemente dar una clase a los "últimos niños". No puede combinar pseudo-elementos, pero ese es básicamente el efecto que quiero lograr.
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
¿Cómo hago que esto funcione?
¡Puedes combinar pseudo-elementos! Lo siento chicos, calculé esto yo mismo poco después de publicar la pregunta. Tal vez se usa con menos frecuencia debido a problemas de compatibilidad.
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
Esto funciona maravillosamente CSS es algo asombroso
Agregué otra respuesta a esta pregunta porque necesitaba exactamente lo que estaba pidiendo @derek y ya había avanzado un poco más antes de ver las respuestas aquí. Específicamente, necesitaba CSS que también podría explicar el caso con exactamente dos elementos de lista, donde NO se desea la coma. Como ejemplo, algunos bylines de autoría que quería producir serían los siguientes:
Un autor: By Adam Smith.
Dos autores: By Adam Smith and Jane Doe.
Tres autores: By Adam Smith, Jane Doe, and Frank Underwood.
Las soluciones ya dadas aquí funcionan para un autor y para 3 o más autores, pero no toman en cuenta el caso de los dos autores, donde el estilo "Oxford Comma" (también conocido como el estilo "Harvard Comma" en algunas partes) no se aplica - es decir, no debería haber coma antes de la conjunción.
Después de una tarde de retoques, me encontré con lo siguiente:
<html>
<head>
<style type="text/css">
.byline-list {
list-style: none;
padding: 0;
margin: 0;
}
.byline-list > li {
display: inline;
padding: 0;
margin: 0;
}
.byline-list > li::before {
content: ", ";
}
.byline-list > li:last-child::before {
content: ", and ";
}
.byline-list > li:first-child + li:last-child::before {
content: " and ";
}
.byline-list > li:first-child::before {
content: "By ";
}
.byline-list > li:last-child::after {
content: ".";
}
</style>
</head>
<body>
<ul class="byline-list">
<li>Adam Smith</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
</ul>
</body>
</html>
Muestra los bylines como los tengo arriba.
Al final, también tuve que deshacerme de cualquier espacio en blanco entre elementos li , para evitar una molestia: la propiedad de bloque en línea dejaría un espacio antes de cada coma. Probablemente haya un truco decente alternativo, pero ese no es el tema de esta pregunta, así que lo dejo para que alguien más responda.
Fiddle aquí: http://jsfiddle.net/5REP2/
Esto funciona :) (Espero que sea multi-navegador, a Firefox le gusta)
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Estoy utilizando la misma técnica en una consulta de medios que efectivamente convierte una lista de viñetas en una lista en línea en dispositivos más pequeños, ya que ahorran espacio.
Entonces el cambio de:
- Artículo de lista 1
- Artículo de lista 2
- Artículo de lista 3
a:
Lista de elementos 1; Lista de elementos 2; Lista de elementos 3.
Me gusta esto para el elemento de la lista en elementos <menu>. Considere el siguiente marcado:
<menu>
<li><a href="/member/profile">Profile</a></li>
<li><a href="/member/options">Options</a></li>
<li><a href="/member/logout">Logout</a></li>
</menu>
Lo estilo con el siguiente CSS:
menu > li {
display: inline;
}
menu > li:after {
content: '' | '';
}
menu > li:last-child:after {
content: '''';
}
Esto mostrará:
Profile | Options | Logout
Y esto es posible debido a lo que Martin Atkins explicó en su comentario
Para tener algo como Uno, dos y tres deberías agregar un estilo de CSS más
li:nth-last-child(2):after {
content: '' '';
}
Esto eliminaría la coma del segundo elemento pasado.
Código completo
li {
display: inline;
list-style-type: none;
}
li:after {
content: ", ";
}
li:nth-last-child(2):after {
content: '''';
}
li:last-child:before {
content: " and ";
}
li:last-child:after {
content: ".";
}
<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Solo para mencionar, en CSS 3
:después
debe usarse así
::después
Desde https://developer.mozilla.org/de/docs/Web/CSS/::after :
La notación :: :: after se introdujo en CSS 3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación: después de la introducción en CSS 2.
Entonces debería ser:
li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }
Un hilo viejo, sin embargo, alguien puede beneficiarse de esto:
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }
Esto debería funcionar en CSS3 y [no probado] CSS2.