Creating a CSS border around custom li bullet

user_4570112 0
Viewed 5309

I'm trying to figure out if it's possible to incorporate a css border around an image I imported as a custom bullet for my li's:

ul {
  list-style: none;
  margin-right: 0;
  padding-left: 0;
  list-style-position: inside;
}

ul > li {
  align-content: center;
  display: flex;
  margin: 5px 0;
  padding-left: 1em;
  text-indent: -1em;
}

ul li:before {
  /* I'm a different image but found a similar 
   sized one online for demonstration 
   purposes seen below */
   
  content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
  border: 1px solid grey;
}
<ul>
   <li>Get to know the business</li>
   <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
   <li>Learn how the team's priorities impact our mission</li>
   <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

The results in the embedded code editor mirror that of the image I'm using.

Flag li bullet

This is the desired output:

desired output

Any ideas? I'm thinking unfortunately I might have to import the icon with border, but am seeing if I can manage without.

Thanks!

html-lists border css html
3 Answers

Yes, it is quite easy to do, please take a look at the example below. You just mess up things a bit.

You have align-content instead of align-items that makes line positioning incorrect. text-indent results into incorrect offset. I've removed these small issues.

About image itself - I've used em as example because of emoji, but for image it will be better to use px and re-calculate values that are currently defined as em.

ul {
    margin-right: 0;
    padding-left: 0;
    list-style: none;
}

ul > li {
    align-items: center;
    display: flex;
    margin: 5px 0;
}

ul li:before {
    /* I'm using the url method to fetch an icon, but 
     inserted a emoji for demonstration 
     purposes seen below */

    /*content: url("path/to/icon");*/
    content: '';
    border: 1px solid #808080;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    display: inline-block;
    padding: 0.25em;
    line-height: 1.0;
    margin-right: 0.5em;
}
<ul>
    <li>Get to know the business</li>
    <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
    <li>Learn how the team's priorities impact our mission</li>
    <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

user_26339560

there are many ways to achieve result.

1) use image with rounded border as background on "li". background should be no-repeat left center and some padding-left on li.

2) give height, width, inline-block and border-radius to li:before.

user_58496120

You should remove "display:flex" from ul > li

ul {
  list-style: none;
  margin-right: 0;
  padding-left: 0;
}

ul > li {
    align-items: center;
    display: flex;
    margin: 5px 0;

}

ul li:before {
  /* I'm using the url method to fetch an icon, but 
   inserted a emoji for demonstration 
   purposes seen below */

  content: '';


 border: 1px solid #808080;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    display: inline-block;
    padding: 0.25em;
    line-height: 1.0;
    margin-right: 0.5em;
}
user_71675320
Related