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.

This is the desired outcome:

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

Thank you!

htmlcsshtml-listsborder

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

jquerycssangularbootstrap-4external-js

Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively. Displaying desktop view on the left and mobile view on the right side. .content{ margi ...

htmlcssresponsivecss-grid

Customize Google Chrome to display a vibrant splash screen instead of a boring white blank page when

"I've been on the lookout for Chrome apps that can help make my screen darker or inverted to reduce eye strain. While I have found some apps that do the job, there's one thing they don't seem to be able to override - the White Blank page. W ...

javascriptjqueryhtmlcssgoogle-chrome

Beginner in CSS wanting to set background image for input field

I am working on incorporating icons into my project. The image I have contains an array of 16x16 icons at this URL: "http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1" Does anyone know how I can selec ...

css

What could be causing the append function to only work during the final iteration of my code?

I find myself in the position of recreating a table based on another existing one. While I am aware that this may not be the ideal approach, it is a task that has been assigned to me rather than being my own choice. My method involves iterating through ea ...

jqueryhtml

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Generate gzipped files using Angular CLI

I am attempting to populate a dist folder with the standard files along with their .gz versions. To achieve this, I used ng eject to obtain the webpack.config.js file in order to integrate the compression plugin from https://github.com/webpack-contrib/comp ...

cssangularwebpackangular-cli

Using srcset and picture together to optimize images for various screen sizes

At my workplace, we are in the process of devising a strategy to integrate responsive images into our custom framework. Our goal is to have one centralized solution that caters to all image use cases. After investigating, it appears that using srcset for ...

htmlimageresponsive-designpicturefillsrcset

Determine if a paragraph contains a specified value using jQuery

I need to only select the checkboxes that do not have a value in the paragraph. Some mistake seems to be causing all the checkboxes to be marked when I click the button (Value > 0). Can you spot where I went wrong? $("input[id*='btnValue']").c ...

htmljquery

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

csstwitter-bootstrap

What is the best way to make a JavaFX WebView the same size as the entire scene?

My goal is to have a JavaFX WebView that automatically resizes to fit the scene upon startup. Currently, I am focused on setting the initial size properly. @Override public void start(Stage stage) { try { Scene scene = new Scene(createWebViewP ...

javacsswebviewjavafxjavafx-webengine

What is the best way to align text to the left without causing it to wrap to the next line?

Currently, I am in the process of designing a banner that will only be displayed when necessary. I am looking for techniques to achieve this goal effectively. Is there a way to align text centrally only if it fits on one line and does not wrap onto a new ...

jqueryhtmlcss

Enhance user experience with jQuery UI sortable and the ability to edit content in real

I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...

javascriptjqueryhtmljquery-uicontenteditable

"Encountering an Ajax error 419 when using radio buttons and a form

I'm attempting to use AJAX to send radio button values to a Laravel route when a button is clicked, but I keep receiving error code 419 even though I am sending the CSRF token. $(document).ready(function(){ $("#valor").on('click' ...

htmlajaxlaravel

Utilizing Ajax to dynamically populate table columns

I have an HTML table with specific labels and styles. I am looking for a way to update the table by using the unique 'id' of each row/element and populate the data using Ajax. Can anyone provide a solution or suggestion? <table border="0" ...

jqueryhtmlajax

When the source file is located in other directories, gcovr fails to generate a comprehensive report

I'm having trouble getting the correct HTML output from gcovr when the source file is located relative to my root directory. Let me illustrate with two cases where gcovr works and where it encounters issues: CASE:1 - Successful execution of gcovr Af ...

htmlrelative-pathgcovcpputestgcovr

Arranging XML information in PHP from most recent to oldest

I have a working code that I want to modify so that the Observed Data is displayed from the newest date to the oldest. How can I flip only the Observed Data? Here is my current code: <?php $url = "http://r7j8v4x4.map2.ssl.hwcdn.net/NOD_R.xml"; $xml = ...

phphtmlxmlxml-parsing

Custom container width causes animation to crash when scrolling

I'm having trouble with my header. When the containers change with scrolling, an animation takes place. Everything works fine with native Bootstrap CSS, but when I customize the width of the container in my custom CSS (the width set to 1140px), the an ...

javascriptjqueryhtmltwitter-bootstrap

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

javascriptjqueryhtml

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Looking for a gallery slider plugin that is responsive both horizontally and vertically. Have tried Flexslider1/2, Galleria, and others but they do not adjust to vertical resizing. Changing the CSS did not help. If you resize the browser horizontally with ...

javascriptjquerycssslidergallery