Designing a unique CSS border for custom list item bullets

Question

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items:

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 {
  /* The image used here is different, but a similar one can be found online for demonstration purposes */
  
  content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
  border: 1px solid grey;
}

<ul>
   <li>Learn about the company</li>
   <li>Get to know important stakeholders and cross-functional partners</li>
   <li>Understand how team priorities contribute to the overall mission</li>
   <li>Familiarize yourself with projects, team goals, and onboarding expectations</li>
</ul>

The output displayed in the code editor matches the appearance of the image I am using.

https://i.sstatic.net/Epxlp.png

This is the desired outcome:

https://i.sstatic.net/pQjJC.png

Any suggestions or alternative approaches? I am considering importing the icon with the border but exploring other options first.

Thank you!

html css html-lists border

Answer 1

Answer №1

Indeed, the task is quite simple to accomplish. Please refer to the example provided below. All you need to do is make a few adjustments.

One common mistake is using align-content instead of

align-items</code, which can lead to misalignment in positioning the lines. Also, using <code>text-indent

may cause an incorrect offset. These minor issues have been rectified for you.

In terms of the image itself, I've utilized em as a sample unit due to the emoji usage. However, it would be more appropriate to use px for images and recalibrate the values currently set 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 {
    /* For demonstration purposes, I've replaced the icon with an emoji */

    /*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>

Answer 2

Indeed, the task is quite simple to accomplish. Please refer to the example provided below. All you need to do is make a few adjustments.

One common mistake is using align-content instead of

align-items</code, which can lead to misalignment in positioning the lines. Also, using <code>text-indent

may cause an incorrect offset. These minor issues have been rectified for you.

In terms of the image itself, I've utilized em as a sample unit due to the emoji usage. However, it would be more appropriate to use px for images and recalibrate the values currently set 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 {
    /* For demonstration purposes, I've replaced the icon with an emoji */

    /*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>

Answer 3

Answer №2

There are numerous techniques to obtain the desired outcome.

1) Utilize an image with rounded borders as a background on the "li" element. Ensure that the background is set to no-repeat at the left center position, and add some padding-left to the li element.

2) Apply height, width, display: inline-block, and border-radius properties to the li:before pseudo-element.

Answer 4

There are numerous techniques to obtain the desired outcome.

1) Utilize an image with rounded borders as a background on the "li" element. Ensure that the background is set to no-repeat at the left center position, and add some padding-left to the li element.

2) Apply height, width, display: inline-block, and border-radius properties to the li:before pseudo-element.

Answer 5

Answer №3

It is recommended to eliminate the "display:flex" property 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 {
  /* Utilizing the url method for fetching an icon, with an emoji inserted for showcasing */

  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;
}

Answer 6

It is recommended to eliminate the "display:flex" property 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 {
  /* Utilizing the url method for fetching an icon, with an emoji inserted for showcasing */

  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;
}

Designing a unique CSS border for custom list item bullets

Answer №1

Answer №2

Answer №3

Similar questions

Ways to eliminate spacing between two select boxes?

Customizing the Steps Component in Ant Design

Create a vertical scrollable feature for the <ul> element when it is set to flex, limiting its height within the specified dimensions

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Using jQuery to Decode the XML Document Containing National Threat Level Data

Personalized design for the range input in React

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

Error: The Vue bind object property cannot be read because it is undefined in the class binding

When inserting a page break after a section, it seamlessly flows to the next page during printing

How can I ensure my game or website fits perfectly on the screen without any need

Chrome clipping positioned spans

`Apply a distinctive color to certain text within the selected text option`

Using dual ngFor in Angular 4: A step-by-step guide

Dynamic search form technology

Develop an exclusive "click-once" button for a webpage

Solving Problems with Image Placement using CSS

Guide to modifying WordPress version 4.5 with HTML pages

Retrieve information from the table and display it in a reverse order

"Exploring the Functionality of Page Scrolling with

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings