How to control size of list-style-type disc in CSS?
CssCss Problem Overview
My HTML first:
<ul class="moreLinks" >
<div>More from Travelandleisure.com</div>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
</ul>
I know that I can apply font-size on li very small so that disc look correct to me and then apply css to "a" inside li. But I do not know why this is not working on the site I am working. I cannot control the html directly.
I saw that when I make this:
.farParentDiv ul li {
list-style: disc inside none;
}
TO this:
.farParentDiv ul li {
list-style-type: disc;
font-size:10px;
}
and now after applying font-size to "a", it works in Firebug. but from my css file. I tried a lot but tired. I can overwrite the above this in css file but cannot change it directly as I did in firebug. Please write what can be the problem?
I used to put dots (.) just before link inside and then apply css on that to control the disc size, but as I said, I cannot control the HTML.
Css Solutions
Solution 1 - Css
Since I don't know how to control only the list marker size with CSS and no one's offered this yet, you can use :before content to generate the bullets:
li {
list-style: none;
font-size: 20px;
}
li:before {
content:"·";
font-size:120px;
vertical-align:middle;
line-height:20px;
}
Demo: http://jsfiddle.net/4wDL5/
The markers are limited to appearing "inside" with this particular CSS, although you could change it. It's definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest - plus you can choose any character you want for the marker.
If you go the image route, see list-style-image.
Solution 2 - Css
I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.
.moreLinks li {
background: url("bullet.gif") no-repeat left 5px;
padding-left: 1em;
}
Also, you may want to move your DIV outside of the UL. It's invalid markup as you have it now. You can use a list header LH if you must have it inside the list.
Solution 3 - Css
If you choose to use inline SVG to render your bullets, you can use width and height properties to control their size:
ul {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");
}
.x_alternative {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");
}
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul class="x_alternative">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Click here for an easy explanation of the viewBox.
Solution 4 - Css
In modern browsers you can use the ::marker CSS pseudo-element like this:
.farParentDiv ul li::marker {
font-size: 0.8em;
}
For browser support, please refer to: Can I Use ::marker pseudo-element
Solution 5 - Css
try to use diffrent font-size for li and a
.farParentDiv ul li {
list-style-type: disc;
font-size:20px;
}
.farParentDiv ul li a {
font-size:10px;
}
this saved me from using images
Solution 6 - Css
I am buliding up on Kolja's answer, to explain how viewBox works
The viewBox is a coordinate system.
Syntax: viewBox="posX posY width height"
viewBox="0 0 4 4" will create this coordinate system:
The yellow area is the visible area.
So if you like to center something in it, then you need to use viewBox='-2 -2 4 4'
I know it looks completly retarded and I also don't understand why they designed it this way...
ul {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='.5' /></svg>");
}
.y {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}
.z {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}
Centered Circle (viewBox Method) [viewBox='-2 -2 4 4', circle r='1']:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:
<ul class="y">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:
<ul class="z">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
But there is a much easier method, you can just use the circles cx and cy attributes.
.centered {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}
Centered Circle (cx/xy) Radius 20 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:
<ul class="centered_a">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Solution 7 - Css
Apart from using custom images for bullets, you can also style the ul or li elements one way and then style the contents differently, as seen here.
The benefit is the lack of images for one thing, and also the added control. The disadvantage is that it tends to involve non-semantic markup, except in this case where the anchors are required already.
Solution 8 - Css
Instead of using position: absolute, text-indent can be used to solve the "inside" problem:
li {
list-style: inherit;
margin: 0 0 4px 9px;
text-indent: -9px;
}
li:before {
content: "· ";
}
Solution 9 - Css
I think by using the content"."; The dot becomes too squared if made too big, thus I believe that this is a better solution, here you can decide the size of the "disc" without affecting the font size.
li {
list-style: none;
display: list-item;
margin-left: 50px;
}
li:before {
content: "";
border: 5px #000 solid !important;
border-radius: 50px;
margin-top: 5px;
margin-left: -20px;
position: absolute;
}
<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>
You edit the size of the disk by editing the size of the border px. and you can adjust the distance to the text by how much - margin left you give it. As well as adjust the y position by editing the margin top.
Solution 10 - Css
When I add list-style-type: disc; to ul then in Google Chrome Version 92.0.4515.131 (Official Build) (arm64), I see this. maybe some browsers haven't been supported this pseudo-element.
I modified the li disc size by this CSS:
.htmlRenderer ul li::marker {
color: red;
font-size: 12px;
}
But please consider the support range of this new feature:
Solution 11 - Css
Easiest way for me is to use Unicode Characters and then style them with span tags. I'm going to use inline css for the sake of the example, but you can do it whatever way you prefer.
eg. When I want to use a square bullet and control its color and size:
<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span> HOME</a></li>
You can find lots of unicode bullets here:
I do this because linking images for bullets seems a little unnecessary to me.
Solution 12 - Css
You can also use 2D transform. It is illustrated in the snippet below with a list being scaled by 25%.
>Nota: Bootstrap is used here for the sole purpose of layouting the demo (before/after effect).
ul#before {
}
ul#after {
transform: scale(1.25);
}
div.container, div.row {
padding: 20px;
}
ul {
border: 6px solid #000000;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- HTML -->
<div class="container">
<div class="row">
<div class="col-xs-5">
Before
</div>
<div class="col-xs-5 col-xs-offset-1">
After (scale 25%)
</div>
</div>
<div class="row">
<div class="col-xs-5">
<ul id="before">
<li>Lorem ipsum dolor sit amet...</li>
<li>In vel ante vel est accumsan...</li>
<li>In elementum libero vel...</li>
<li>Nam ut ante a sem mattis...</li>
<li>Curabitur fermentum nisl...</li>
<li>Praesent vel risus ultrices...</li>
</ul>
</div>
<div class="col-xs-5 col-xs-offset-1">
<ul id="after">
<li>Lorem ipsum dolor sit amet...</li>
<li>In vel ante vel est accumsan...</li>
<li>In elementum libero vel...</li>
<li>Nam ut ante a sem mattis...</li>
<li>Curabitur fermentum nisl...</li>
<li>Praesent vel risus ultrices...</li>
</ul>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Reference:
Solution 13 - Css
I'm surprised that no one has mentioned the list-style-image property
ul {
list-style-image: url('images/ico-list-bullet.png');
}
Solution 14 - Css
Here I am attaching my solution that works perfectly in responsive too and you can control the size of the bullet very easily.
body {
font-family: Arial;
}
ul {
list-style: none;
}
li {
padding-left: 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: normal;
}
ul li::before {
content: "";
width: 5px;
height: 5px;
display: inline-block;
vertical-align: middle;
background-color: pink;
border-radius: 100%;
margin-right: 10px;
margin-left: -15px; /* Same negative margin as li padding */
}
<div><h3>More from Travelandleisure.com</h3></div>
<ul class="moreLinks" >
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
</ul>
<h3>My example with lengthy text to show more clear result</h3>
<ul>
<li>Quisque nibh mauris</li>
<li>hired in he unable his thing rung and, in that films recommendation of the writing poster meticulous rewritten value comment finally, a the that low necessary fellow take fail then hope up, nor may needs better orthographic put took derisively to trumpet
covered her be the offer, hotel would differences material. With mild, fact, the slide and, furnished as than with to the he she sides from where represent principles, in this ran derivative found was step after how to case privilege text a he tone
inn so two through well, on is at knows, help people.</li>
<li>Dictum lacinia dui</li>
<li>Vestibulum dignissim imperdiet</li>
</ul>
Thanks