Make Bullet Points smaller

Is there a way to make bullet points smaller while keeping the list items the same font-size?

Not organically. You could fake it by using a bullet background image though.

I’ve been having some fun playing with this. I can’t vouch for browser support, but try

ul {
  list-style-type: none;
}
li::before {
  content: ".";
  margin-right: 0.4em;
  position: relative;
  top: -0.25em;
}
3 Likes

Interesting!!

I could not find a suitable “bullet” or “disc”. Someone else may know of one.
If you are willing to consider an asterisk or other UTF symbol, you could try something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--

-->
    <style type="text/css">

.outer {
    width:500px;
    margin:0 auto;
}

ul {
    border:1px solid #f00;
}
li {
    border:1px solid #0f0;
}
.asterisk {
    list-style-type:none;
    padding:0;
}
.asterisk li {
    padding-left:1.1875em;
    position:relative;
}
.asterisk li:before {
    content:"\002a";   /* asterisk */
    position:absolute;
    left:0;
    top:0.0625em;
    color:#f00;
    font-weight:bold;
    font-size:1.125em;
}
pre {
    font-family:"courier new",monospace;
    margin-bottom:.25em;
    white-space:pre-wrap;
}
    </style>
</head>
<body>

<div class="outer">
    <pre>ul.asterisk {
    list-style-type:none;
    padding:0;
    margin:0;
}
.asterisk li {
    padding-left:1.125em;
    position:relative;
}
.asterisk li:before {
    content:"\002a";   /* asterisk */
    position:absolute;
    left:0;
    top:0.0625em;
    color:#f00;
    font-weight:bold;
    font-size:1.125em;  /* size of marker */
}</pre>
    <ul class="asterisk">
        <li>This is a list item.</li>
        <li>This is a list item.</li>
        <li>This is a list item.</li>
        <li>This is a list item.</li>
    </ul>
</div>
</body>
</html>

This is very similar to @Mittineague’s, just been fermenting longer.

3 Likes

I like that, just about any unicode glyph can be used. eg.

  content: "\1F426";
  color: #66F;

Sorry, for getting off-topic here. just that I find this potentially very useful

1 Like

Thanks guys!

I know you’ve already signed out of this topic, but I found 3 additional Unicode glyphs that you might like:

\002a = asterisk,
\25cf = disc,
\2022 = middot,
\2666 = diamond

The middot seems to look better than the disc on my PC.

https://en.wikipedia.org/wiki/Windows_Glyph_List_4

Cheers!

1 Like

And it’s use doesn’t require any “top” tweaking :+1:

Good job, @ronpat and @Mittineague

Another trick in my bag!

Thanks!

Hi there mikey_w,

try it like this…

[code]

untitled document body { font-family:arial,helvetica,sans-serif; font-size:100%; } ul{ font-size:50%; } ul span { font-size:200%; }
  • Lorem Ipsum
[/code]

coothead

<aside>

Mr. C, you made my day . “Good” or “Bad”, your example will probably still work a hundred years from now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list-item marker size</title>
    <style media="screen">
body {
    font-family:arial,helvetica,sans-serif;
    font-size:106.25%;
}
ul {
    max-width:400px;
    outline:1px solid magenta;  /* TEST Outline.  To Be DELETED. */
    padding-left:0;
    margin:16px;
}
li {
    outline:1px solid lime;  /* TEST Outline.  To Be DELETED. */
}
span {
    vertical-align:middle;
}
.smaller {font-size:75%;}
.smaller span {font-size:133.3%;}
.smallest {font-size:66.67%;}
.smallest span {font-size:150%;}
    </style>
</head>
<body>

<ul>
    <li>Lorem Ipsum lives here.  She loves the flora and the fauna and enjoys reciting Latin prose in the shade.</li>
</ul>

<ul class="smaller">
    <li><span>Lorem Ipsum lives here.  She loves the flora and the fauna and enjoys reciting Latin prose in the shade.</span></li>
</ul>

<ul class="smallest">
    <li><span>Lorem Ipsum lives here.  She loves the flora and the fauna and enjoys reciting Latin prose in the shade.</span></li>
</ul>

</body>
</html>
1 Like

Well, I am rather surprised that basic CSS could have that effect on anyone. :open_mouth:

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.