@Mirjax2000
Posted
Hi,
You did it exactly as i did. I mean that pseudoelements. Only one thing is missing and that is color. That before elements font has different color then text inside.
For that repeating your code.
declare one li: before{ here insert everything what has all li:before common - size,color,etc.., without content""; then make your nth elements only with what has to be change.
.instructions-row:nth-child(1)::before { and here insert what is changing, and that is content"1.")
.instructions-row::before{
font-size: 1rem;
color:black;
line-height: 1em;
etc...
.instructions-row:nth-child(1)::before {content:"1."};
.instructions-row:nth-child(2)::before {content:"2."};
.instructions-row:nth-child(3)::before {content:"3."};
.instructions-row:nth-child(4)::before {content:"4."};
or if you use Sass preprocesor you can write this short code - it is cycle.
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
&::before {
content:'#{$i}.'
}
}
};
rest is perfect. I am also strugelling with code repeating. I have to practice more, and even before i start code some design i have to project some points where i will use same code.
Good job. thank you.
Marked as helpful
