Customize List Item Bullets Using CSS

Customize list item bullets using CSS

You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup - but something like:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

Alternately, you can specify an image file for your list bullets, that could be as big as you want:

ul{
  list-style: square url("38specialPlusP.gif");
 }

See: http://www.w3schools.com/css/css_list.asp

CSS: Create custom list bullets

LIVE DEMO

/* HTML*/

        <ul>
    <li>Point one <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Point two <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point three <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point four <br>Lorem adipiscing elit. </li>
    <li>Point five <br> Lorem consectetur adipiscing elit.</li>
    </ul>
    /*CSS*/
        ul{list-style:none; padding:0}
    ul li {
        display: block;
        position: relative;
        padding: 0 0 0 40px;
        min-height:50px
    }
    li:last-child:after {display:none}
    ul li:after {
        content: '';
        top: 11px;
        left: 0;
        background-color: #000;
        height: 100%;
        width: 2px;
        position: absolute;
    }

    ul li:before {
        content: '';
        top: 10px;
        left: 0;
        background-color: #000;
        height: 2px;
        width: 30px;
        position: absolute;
    }

Custom bullet symbol for li elements in ul that is a regular character, and not an image

The following is quoted from Taming Lists:

There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.

The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ».

» Item 1

» Item 2

» Item 3

» Item 4

» Item 5 we'll make

   a bit longer so that

   it will wrap

Decrease List style bullet size using css?

You can do this, if you don't want to use image.

li {

    list-style: none;

}

li:before {

    content:"· ";

    font-size:24px;

    vertical-align:middle;

    line-height:20px;

}

<ul>

<li><a>Item 1</a></li>

<li><a>Item 2</a></li>

<li><a>Item 3</a></li>

<li><a>Item 4</a></li>

<li><a>Item 5</a></li>

</ul>

Increase size of list-style-bullet type

Might not work in old version of IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

For IE6:

Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.

CSS list bullet custom image size

You can do this two ways Do whatever suits you best. I hope that what you wanted.

Using background property

You need to do background and your image url.

ul {
  list-style: none;
  width: 100%;
}

ul li::before {
  filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%);
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background: url("https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png");
  background-size:20px 20px;

}

li {
  display: list-item;
}

<div class="benefits">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ul>
</div>

Custom bullet icon for dt tag using CSS not working

As an alternative approach to the main answer, what you were trying to do is possible, but it works only on elements with display: list-item, which dt does not have by default. So add that. Also, the bullet is to the left of the element, so you should add some padding to prevent it from being outside the viewport. That's all you need to change.

dt {

  list-style-image: url('https://placehold.it/10x10');

  display:list-item;  /* to make it work */

  margin-left:2em;    /* to make it visible */

}

<dl>

  <dt><a href="#">Topic 1</a></dt>

  <dd>short description</dd>

</dl>

---

Related Topics