Social proof section

Community feedback

• 

  Ben•770

  @BenConfigPosted almost 3 years ago

  How about this:

  .review::before {
      content: url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg);
      margin: 0px 30px 0px 20px;
      display: inline-flex;
      gap: .25rem;
  }
  

  You can use the gap property to increase/decrease the space between the stars as you wish.

  Marked as helpful

  1

  ---

  

  AzeezBNA•70

  @azizbnaPosted almost 3 years ago

  Hello @BenConfig ! I tried to post a comment earlier but I guess it didn't go through. I tried this earlier and IT WORKED, although it doesn't seem to work on chrome, even after trying some webkit prefixes, I'll look into it more tomorrow if I can find some alternative or something, Thanks for the help!

  0

  

  Ben•770

  @BenConfigPosted almost 3 years ago

  @azizbna Sorry, I only tested in FireFox. That's a shame that it doesn't work in Chrome.

  Perhaps your original idea is best, however you can use word-spacing to control the size of the spaces between the stars (letter-spacing also works):

  .review::before {
      content: url(./images/icon-star.svg) ' '
               url(./images/icon-star.svg) ' '
               url(./images/icon-star.svg) ' '
               url(./images/icon-star.svg) ' '
               url(./images/icon-star.svg);
      margin: 0px 30px 0px 20px;
      word-spacing: .25rem;
  }
  

  Marked as helpful

  1

  

  AzeezBNA•70

  @azizbnaPosted almost 3 years ago

  @BenConfig I tried using word-spacing when testing, didn't add the space characters though so it didn't work, but I like your solution, it's easier to style .

  Thank you for taking your time to help out!

  0