Recipe Page

Community feedback

• 

  Mirjax2000•720

  @Mirjax2000

  Posted about 1 year ago

  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.

  00

  Marked as helpful