CSS / SCSS background image as marker for li via :before

Question

this is my first question so I hope its specific enough:

I want to enter a svg check mark sign (https://fonts.google.com/icons?icon.query=check&icon.style=Sharp) in front of each li item, instead of the marker (I already removed in ul).

When I enter it I cannot see the svg image, I can only see something when I enter background color and then not the svg just the background color in the area where the image should be. SVG file is saved in the folder and other svg files in the document work as well.

The code is the following:

ul {
  list-style-type: none;
  li {
    margin-bottom: 1em;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      background-image: url("icon-check3.svg");
      background-size: contain;
      background-position: center;
      margin-left: -3em;
    }
  }
}

Have you tried using an absolute URL? – Arleigh Hix Jul 24 '22 at 21:27 — Arleigh Hix, Jul 24 '22 at 21:27

score 1 · Accepted Answer · answered Jul 24 '22 at 21:31

Basically your code is correct. We're missing the svg itself to debug it. However I did include some check icon as a Static icon font.

li {
  margin-bottom: 1em;
  position: relative;
  list-style: none;
}

li:before {
  font-family: 'Material Symbols Sharp';
  content: "check";
  position: absolute;
  color: lightgreen;
  width: 2.5em;
  height: 2.5em;
  margin-left: -2em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />


<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>

</ul>

score 0 · Answer 2 · answered Jul 24 '22 at 21:29

0

A bit hard to check without having an actual live example.

Some hints:

Are you sure the icon is referenced correctly? (The path must be relative to the CSS file)

You might try display:block on the ::before element

With position absolute it's mostly better to use top and left (or bottom and right) properties. Negative margins can be helpful, but are logically worse - 'd say.

Is the svg displaying in other contexts?

answered Jul 24 '22 at 21:29

Hi, thank you very much for your reply (all of you :)). I tried and when I enter the svg in another place on the page like the others I used it worked fine. But the other svg files are embedded in the HTML code. Here I tried to get the svg to display by only using CSS, so it is not in the HTML file, is this still possible to do so? By the way when I write something in the content between the two "" then I see it in the place where the svg should be. – LukLearn Jul 25 '22 at 08:40
Sorry again, here is where I got it from https://www.youtube.com/watch?v=D-h8L5hgW-w&t=6184s and on 1:36:18 you see what I mean, he is using the green checkmarks, mine are just same in black – LukLearn Jul 25 '22 at 08:49
Sorry for bothering, found the solution :) - the / sign was missing infont of the file name.... Thank you all :) – LukLearn Jul 25 '22 at 18:44

CSS / SCSS background image as marker for li via :before

2 Answers2