The custom bullet points are not appearing correctly

I've been attempting to design a custom bullet list, but it doesn't look quite right as I had hoped.

The issue is that the spacing appears too close, you can see an example HERE

Any suggestions would be greatly appreciated.

Thank you

Answer №1

If you want to customize lists, you can utilize the :after and :before selectors. One approach could be implementing this code:

ul{list-style:none;}
li{padding-left:15px; position:relative;}
li:before{content:" "; position:absolute; left:0; height:10px; width:10px; background:url(path/img);}

Answer №2

It is advisable to define a specific line-height for the <li> elements.

For example:

<ul class="custom-list">
    <li>some item</li>
    <li>some other item</li>
</ul>

Here is the corresponding CSS:

.custom-list li {
    line-height: 20px;
}

Visit jsfiddle here, adjust the line-height, and click run to visualize the changes...

You may also need to fine-tune the placement of your custom bullet images. As mentioned in the comments, providing a code snippet or creating a jsfiddle would facilitate further assistance...

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

Tips for changing the width of a child element in CSS without impacting the parent's width

Here is the scenario: <div class="parent"> <div class="sizer" /> <div class="child" /> </div> .sizer { width: 200px; } .child { position: relative; width: 400px; } I am facing restrictions - I cannot explicitly set the width ...

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

Text not aligning properly when utilizing the <p> tag

I'm struggling to align my text in a row, as shown below: https://i.sstatic.net/SGQ8I.png "Investup" and "Real estate" should be aligned. I need to move the "Real estate" paragraph so that it aligns with the "invest up" paragraph. Here's my co ...

When the text exceeds its container, the CSS property overflow will display only the

.example{ overflow:auto; } <div class="example"> <p>Some Additional Text Here<P> </div> This particular code snippet showcases the initial portion of the text, allowing for scrolling down to reveal items 5 and 6: 1 2 ...

My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

I'm currently struggling with implementing a tooltip for the "Back-end" button on my webpage. Despite my efforts, the tooltip effect fails to display over the button, and I'm at a loss as to why. Below is the code snippet I am working with: < ...

The desired hover effect on the navigation bar is not functioning properly

I have successfully created a hover effect for my navigation bar and the list inside it. However, I am facing an issue where the box shadow effect is only appearing in a small area when hovered (see image below). My goal is to extend the shadow effect to ...

Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen ...

Steps for reverting a widget's background color to its default state following the utilization of gtk_css_provider_load_from_data()

Previously, I would adjust the background colors of widgets using gtk_widget_override_background_color. However, this function is no longer supported, so I am looking to migrate to utilizing GtkCssProvider. I have discovered that I can modify the backgrou ...

Is there a way to customize the dot in a JavaFx RadioButton?

Hello fellow coding enthusiasts, I am looking to find out how I can customize the color of a RadioButton dot. I want to have 3 RadioButtons, each with a different color to represent a state. Do I need to use CSS for this task? If so, could someone please ...

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

Unfortunately, Rem fails to honor the preferences of users on their smartphones

Trying to incorporate rem units to respect user-defined font-size: Initially, I included the following line in my CSS file: html { font-size: 62.5%; } Subsequently, I applied font-size using rem units to my element. For example: .header{ font-size: 1.5 ...

What is the best method to align these images in the center of this div?

Struggling to center the images inside the div...any suggestions? I know it's basic, just getting back into it. Hopefully someone understands what I'm trying to achieve here? Tryin' to get those images centered in the div but can't fig ...

Can you please tell me the term used to describe when a background adjusts and follows the movement of a mouse cursor?

Just wrapped up freeCodeCamp's HTML & CSS Responsive Web Design course and noticed a cool feature in some portfolios that I'd like to learn. However, I'm not sure what it's called. Here are some examples: The video game Escape From Ta ...

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

A step-by-step guide on how to display a specified amount of images in the center of

I'm currently working with a div that displays images dynamically loaded from a database, ranging from 1 to 5 images. The number of images may vary each time, and I need assistance in centering these images inside the div regardless of their quantity. ...

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...