How can I increase the bullet size in a li?
You could do this in an IE8 conditional comment...
ul {
list-style: none;
}
ul li:before {
content: "•";
font-size: 170%; /* or whatever */
padding-right: 5px;
}
jsFiddle.
In IE7, you could prepend the bullet via JavaScript and style it accordingly.
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.
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
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>
How to control size of list-style-type disc in 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.
How do I align the bullets to middle in a li tag?
You need to add these three lines to your ul.language-bar li:before
class
position: absolute;
left: 50%;
margin-left: -1em;
This will
unbind bullets to make it possible to position them directly
move every bullet to the center of its parent li (since it is the first parent element having
positions:relative
)shift every bullet 1em (half of bullet's width) to the left to make it perfectly centred.
ul.language-bar {
max-width: 29em;
width: 100%;
padding: 0 18px;
height: 2em;
margin: 0;
padding: 0;
font-size: 10px;
/* change font size only to scale*/
}
ul.language-bar li {
width: 15%;
float: left;
height: 100%;
list-style: none;
position: relative;
margin: 0;
}
ul.language-bar li.empty:before {
background: #fff;
border: 0.3em solid #f98d9c;
box-sizing: border-box;
}
ul.language-bar li:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: #f98d9c;
width: 2em;
height: 2em;
border-radius: 2em;
z-index: 2;
position: absolute;
left: 50%;
margin-left: -1em;
}
.language-container .language-bar {
justify-content: center;
display: flex;
}
<div class="language-container">
<ul class="language-bar">
<li></li>
<li></li>
<li></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
</div>
Related Topics
How to Display User Profile Image in Circle
3 Columns, Middle One with Flexible Width
How to Set Safari Print Margins via CSS to Print Borderless
Are There Any CSS Standards That I Should Follow While Writing My First Stylesheet
3 and 2 Column Full Screen (Width & Height) Layouts (Css)
Is It Possible in SASS to Inherit from a Class in Another File
How to Set a CSS Border on One Side Only
Different CSS Transition-Delays for Hover and Mouseout
How to Make an Iframe Resizable
Chrome Get "User Agent Stylesheet"
How to Change Navbar/Container Width? Bootstrap 3
How to Create a Calc Mixin to Pass as an Expression to Generate Tags
What Is Difference Between CSS Em and Ch Units