texto - css after before ejemplos

pseudo elemento que no se alinea en la esquina superior izquierda

Question

Estoy mostrando los números de los mosaicos usando el counter y el content CSS. Quiero mostrar estos números en la esquina superior izquierda del mosaico. El siguiente código lo muestra correctamente en Chrome, pero no en FF o IE 11 (no se ha comprobado en otros navegadores).

¿Qué cambios necesito en CSS para mostrar consistentemente el número en la esquina superior izquierda?

Chrome: así es como quiero:

Firefox: números alineados a la izquierda ... pero no superior:

.tiles {
/* flex properties as container (tiles level 1, 2 & 3) */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
align-content: strech;
/* flex properties as content (tiles level 2 & 3) */
flex-grow: 1;
flex-shrink: 1;
flex-basis: strech;
}
.tiles.level1 {
flex-direction: column;
flex-grow: 0;
width: 600px;
height: 300px;
counter-reset: tileNum;
}
.tiles.level2 {
flex-direction: row;
}
.tiles.level3 {
flex-direction: row;
}
.tiles .title {
align-self: center;
font-size: 42px;
}
.tile {
border: 1px solid black;
background-color: white;
width: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* auto = use width & height values if available */
font-size: 24px;
}
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.centerContent {
/* flex-grow: 1;
flex-shrink: 1;
align-self: center;*/
}
.tile:before {
counter-increment: tileNum;
content: counter(tileNum);
align-self: flex-start;
flex-grow: 0;
font-size: 16px;
}
.tile:after {
content: '' '';
align-self: flex-end;
flex-grow: 0;
font-size: 16px;
}
.brand {
text-decoration: underline;
font-variant: small-caps;
}

<section class="section static">
<div class="tiles level1">
<span class="title">
<span class="brand">So</span>mething
</span>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
</div>
</section>

Nota:

1. Estoy usando la caja flexible para mostrar las baldosas y preferiría una solución con flexbox solamente
2. Estoy buscando una solución CSS única. (Estoy bastante seguro de que será posible, pero me estoy perdiendo algo relacionado con las propiedades de flexbox).
3. Se necesita anidar .tiles porque: Quiero mostrar 4 mosaicos seguidos cuando la página se ve en la PC o en el móvil en modo apaisado, pero solo desea mostrar 2 mosaicos en una fila si se ve en el móvil en modo vertical. Estoy bien para tener alguna alternativa para esto.

Answer 1

La fuente del problema es align-content aquí:

.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center; <-- causing the problem
flex-direction: row;
flex-wrap: wrap;
}

Cuando le dice a las líneas en un contenedor flexible que se centre, se derrumba todo el espacio adicional, empacando todas las líneas en el centro del contenedor. Eso es lo que align-content: center hace.

Por lo tanto, su pseudoelemento de contador, que los navegadores consideran un elemento flexible , no debe moverse a la parte superior del contenedor. align-self: flex-start que ha especificado no debe lograr su objetivo porque el elemento está confinado a la línea flex centrada, junto con sus hermanos.

Entonces Firefox tiene este derecho, en términos de adherencia a las especificaciones.

Chrome, como suele ocurrir (consulte aquí y aquí para ver ejemplos), parece tener en cuenta el comportamiento lógico del usuario para mejorar la experiencia del usuario (lo llaman una intervención ).

De todos modos, una vez que elimine align-content: center , el valor por defecto de stretch se vuelve a asumir, y sus elementos de flex se pueden mover libremente a lo largo de toda la altura del contenedor.

.tiles {
/* flex properties as container (tiles level 1, 2 & 3) */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
align-content: strech;
/* flex properties as content (tiles level 2 & 3) */
flex-grow: 1;
flex-shrink: 1;
flex-basis: strech;
}
.tiles.level1 {
flex-direction: column;
flex-grow: 0;
width: 600px;
height: 300px;
counter-reset: tileNum;
}
.tiles.level2 {
flex-direction: row;
}
.tiles.level3 {
flex-direction: row;
}
.tiles .title {
align-self: center;
font-size: 42px;
}
.tile {
border: 1px solid black;
background-color: white;
width: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* auto = use width & height values if available */
font-size: 24px;
}
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
/* align-content: center; <-- REMOVE */
flex-direction: row;
flex-wrap: wrap;
}
.centerContent {
/* flex-grow: 1;
flex-shrink: 1;
align-self: center;*/
}
.tile:before {
counter-increment: tileNum;
content: counter(tileNum);
align-self: flex-start;
flex-grow: 0;
font-size: 16px;
}
.tile:after {
content: '' '';
align-self: flex-end;
flex-grow: 0;
font-size: 16px;
}
.brand {
text-decoration: underline;
font-variant: small-caps;
}

<section class="section static">
<div class="tiles level1">
<span class="title">
<span class="brand">So</span>mething
</span>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
</div>
</section>

demo jsFiddle

Para una explicación más completa, mira esta publicación:

• ¿Cómo funciona flex-wrap con Align-Self, Align-Items y Align-Content?

Answer 2

Puede usar el posicionamiento absoluto para los números:

.tiles {
/* flex properties as container (tiles level 1, 2 & 3) */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
align-content: strech;
/* flex properties as content (tiles level 2 & 3) */
flex-grow: 1;
flex-shrink: 1;
flex-basis: strech;
}
.tiles.level1 {
flex-direction: column;
flex-grow:0;
width: 600px;
height: 300px;
counter-reset: tileNum;
}
.tiles.level2 {
flex-direction: row;
}
.tiles.level3 {
flex-direction: row;
}
.tiles .title {
align-self: center;
font-size: 42px;
}
.tile {
border: 1px solid black;
background-color: white;
width: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto; /* auto = use width & height values if available */
font-size: 24px;
position:relative;
}
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.centerContent {
flex-grow:1;
flex-shrink:1;
align-self:center;
text-align:center;
}
.tile:before {
counter-increment: tileNum;
content: counter(tileNum);
align-self: flex-start;
flex-grow:0;
font-size: 16px;
position:absolute;
top:0;
}
.tile:after {
content: '' '';
align-self: flex-end;
flex-grow:0;
font-size: 16px;
}
.brand {
text-decoration: underline;
font-variant: small-caps;
}

 <section class="section static">
<div class="tiles level1">
<span class="title">
<span class="brand">So</span>mething
</span>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
</div>
<div class="tiles level3">
<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
</div>
</div>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
</div>
<div class="tiles level3">
<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
</div>
</div>
</div>
</section>