pseudo element not aligning at top left corner

Question

I\'m displaying tile numbers using CSS counter and content. I want to display these number at left top corner of the tile. The following code shows

Answer 1

You can use absolute positioning for the numbers:

.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;
}

  

	

		
			Something
		
		

			

				Something
				Something
			
			

				Something
				Something
			
		
		

			

				Something
				Something
			
			

				Something
				Something