发表新帖
发表新帖

Customize list item bullets using CSS

前端 未结
关注
12 1209
感动是毒
感动是毒 2020-12-15 03:17

Is it possible to change the size of an

  • element\'s bullet?

    Take a look at the code below:

    li {
    list-sty
    • 相关标签:
    12条回答
    • 不知归路
      2020-12-15 04:03

      If you wrap your <li> content in a <span> or other tag, you may change the font size of the <li>, which will change the size of the bullet, then reset the content of the <li> to its original size. You may use em units to resize the <li> bullet proportionally.

      For example:

      <ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

      Then CSS:

      li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

      A more complex example:

      <!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

      Results in:

      0 讨论(0)
    • 广开言路
      2020-12-15 04:06

      This method moves the disc out of the text flow where the original disc was, but is adjustable.

      ul{
    list-style-type: none;
    
    li{ 
        position: relative;
      }
    li:before {
        position: absolute;
        top: .1rem;
        left: -.8em;
        content: '\2022';
        font-size: 1.2rem;
    }
}
      0 讨论(0)
    • 温柔的废话
      2020-12-15 04:08

      Another way of changing the size of the bullets would be:

      1. Disabling the bullets altogether
      2. Re-adding the custom bullets with the help of ::before pseudo-element.

      Example:

      ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}
      <ul>
  <li>first element</li>
  <li>second element</li>
</ul>

      No markup changes needed

      0 讨论(0)
    • [愿得一人]
      2020-12-15 04:19

      I assume you mean the size of the bullet at the start of each list item. If that's the case, you can use an image instead of it:

      list-style-image:url('bigger.gif');
list-style-type:none;

      If you meant the actual size of the li element, then you can change that as normal with width and height.

      0 讨论(0)
    • 说谎
      2020-12-15 04:19

      You have to use an image to change the actual size or form of the bullet itself:

      You can use a background image with appropriate padding to nudge content so it doesn't overlap:

      list-style-image:url(bigger.gif);

      or

      background-image: url(images/bullet.gif);
      0 讨论(0)
    • 情深已故
      2020-12-15 04:19

      I just found a solution that I think works really well and gets around all of the pitfalls of custom symbols. The main problem with the li:before solution is that if list-items are longer than one line will not indent properly after the first line of text. By using text-indent with a negative padding we can circumvent that problem and have all the lines aligned properly:

      ul{
    padding-left: 0; // remove default padding
}

li{
    list-style-type: none;  // remove default styles
    padding-left: 1.2em;    
    text-indent:-1.2em;     // remove padding on first line
}

li::before{
    margin-right:     0.5em; 
    width:            0.7em; // margin-right and width must add up to the negative indent-value set above
    height:           0.7em;

    display:          inline-block;
    vertical-align:   middle;
    border-radius: 50%;
    background-color: orange;
    content:          ' '
}
      0 讨论(0)
     看不清?
    提交回复
    热议问题