Is it possible to change the size or type of a bullet from a list w/just css w/out adding an image?
from the standard circle to a smaller circle for example?
Thank you
D
You don’t really have a lot of options out of the box, but here they are: http://reference.sitepoint.com/css/list-style-type
E.g.
ul {list-style-type: square;}
I’m not sure how much (if any) control you have over size.
The size of the bullet varies between browsers but its size is controlled by the size of the font you are using. Therefore you could set the ul to have a large font-size and then nest your content in a span with a smaller font-size to get the effect of larger or smaller bullets.
Or if you wanted to be clever the bullet could be added with pseudo content and leave the html unaffected.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul.list {
margin:0;
padding:0;
list-style:none;
}
ul.list li:before {
content:" ";
clear:left;
list-style:outside;
margin:0 0 0 1em;
display:list-item;
float:left;
line-height:1.0;
position:relative;
}
ul.list li { clear:left }
li.one:before {
font-size:10px;
top:.6em
}
li.two:before {
font-size:14px;
top:.3em
}
li.three:before {
font-size:18px;
top:.1em
}
li.four:before { font-size:22px }
</style>
</head>
<body>
</body>
<ul class="list">
<li class="one">This is a test</li>
<li class="two">This is a test</li>
<li class="three">This is a test</li>
<li class="four">This is a test</li>
</ul>
</body>
</html>
Thank you Ralph & thank you Paul. One of my co-workers was having some issues w/this.
I would have suggested doing a list style of none & adding & styling span to the <li> elements then positioning it. But that seemed like a lot of work for not much of a return.
Will try out your suggestion Paul it seems a lot more common sense.
Cool example, Paul! Thank you. 
Paul speaks css fluently!
of course the only annoying thing is that ie doesn’t get it. so for that you could code in an image in case ie was the browser of choice.
D
Modern versions should. What are you testing in? Please remember that there are lots of versions. Just referencing IE isn’t enough.
well i wouldn’t check it on ie 7
it is a new version worked for other css stuff i tried but maybe not new enough?
11.0.9600.16521
Hm, 11 is the latest version, which is standards compliant. I don’t have it to test, but I’d be surprised if this didn’t work in it.
Hmmm, doesn’t seem to work in IE11 (another bug or omission I guess) 
There is a simpler option and we could use • instead for the dot and use the same format as before.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul.list {
margin:0;
padding:0;
list-style:none;
}
ul.list li:before {
content:"\\2022 ";
padding:0 5px 0 0;
display:inline-block;
width:10px;
text-align:center;
vertical-align:middle;
line-height:1.0;
}
li.one:before { font-size:10px; }
li.two:before { font-size:14px; }
li.three:before { font-size:18px; }
li.four:before { font-size:22px }
</style>
</head>
<body>
</body>
<ul class="list">
<li class="one">This is a test</li>
<li class="two">This is a test</li>
<li class="three">This is a test</li>
<li class="four">This is a test</li>
</ul>
</body>
</html>
That works back to IE8 and is a little easier to manage also.
If you want to create a triangle bullets, then you can use this code snipet in your CSS.
i.e.,
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
Nice example, cyrilkeiser.
{position:relative} is not the best property to use in this situation. Take a look at the following implementation of your code.
If you look at the screen with {position:relative} disabled, you will see that the triangle is positioned above and at the beginning of the text that follows it. When you enable {position:relative}, the triangle moves to the left of the text as desired, BUT the space above the list item remains. In other words, {position:relative} moves the object but not the space that it originally occupied.
<!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>styling list markers</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1204771-styling-the-bullets-of-a-list-w-css
Apr 9, 2014, 17:13
pdxSherpa
-->
<style type="text/css">
ul {
list-style-type:circle;
}
.square {
list-style-type:square;
}
.pennant {
list-style-type:none;
}
.pennant:before {
content:"";
border-color:transparent #111;
border-style:solid;
border-width:0.35em 0 0.35em 0.45em;
display:block;
height:0;
width:0;
left:-1em;
top:0.9em;
/* position:relative; /* */
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li class="square">test</li>
<li>test</li>
<li class="pennant">test</li>
<li>test</li>
</ul>
</body>
</html>
A better way to position the triangle to the left of the text with the positioning properties is to set the list item to {position:relative} and the :before box to {position:absolute}. (The same as you would an image.)
<!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>styling list markers</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1204771-styling-the-bullets-of-a-list-w-css
Apr 9, 2014, 17:13
pdxSherpa
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
ul {
list-style-type:circle;
}
.square {
list-style-type:square;
}
.pennant {
list-style-type:none;
position:relative;
}
.pennant:before {
content:"";
display:block;
height:0;
width:0;
border-color:transparent #f00;
border-style:dotted solid;
border-width:0.35em 0 0.35em 0.5em;
position:absolute;
left:-.95em;
top:50%;
margin-top:-.25em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li class="square">test</li>
<li>test</li>
<li class="pennant">test</li>
<li>test</li>
</ul>
</body>
</html>