I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:
list-style-image
And then giving it a URL.
However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.
Can this be done or am I forced to make it a graphic first?
This question is related to
html
css
webkit
mobile-webkit
Here is the best solution I've found so far. It works great and it's cross-browser (IE 8+).
ul {
list-style: none;
margin-left: 0;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "?";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line. 1.2em is the width you want for your character, change it for your needs.
Font-awesome provides a great solution out of the box:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />_x000D_
_x000D_
<ul class='fa-ul'>_x000D_
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>_x000D_
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>_x000D_
</ul>This is the W3C solution. Works in Firefox and Chrome.
ul { list-style-type: ""; }
/* Sets the marker to a emoji character */
http://dev.w3.org/csswg/css-lists/#marker-content
ul { list-style-type: " "; } <ul><li>item</li></ul>Interestingly enough I do not thing any of the posted solutions are good enough, because they rely on the fact that the character used is 1em wide, which does not need to be so (with maybe exception of John Magnolia's answer which however uses floats which can complicate things another way). Here is my attempt:
ul {_x000D_
list-style-type: none;_x000D_
margin-left: 0;_x000D_
padding-left: 30px; /* change 30px to anything */_x000D_
text-indent: -30px;_x000D_
}_x000D_
ul li:before {_x000D_
content: "xy";_x000D_
display: inline-block; _x000D_
width: 30px;_x000D_
text-indent: 0;_x000D_
text-align: center; /* change this for different bullet position */_x000D_
}<ul>_x000D_
<li>Item 1</li>_x000D_
<li>Item 2</li>_x000D_
<li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>_x000D_
<li>Item 4</li>_x000D_
<li>Item 5</li>_x000D_
</ul>This has these advantages (over other solutions):
text-align: center; by anything to your liking. For example you may try
color: red;
text-align: right;
padding-right: 5px;
box-sizing: border-box;
or if you do not like playing with border-box, just subtract the padding (5px) from width (i.e. width:25px in this example). There are lots of options.Enjoy.
.list-dash li, .list-bullet li {_x000D_
position: relative;_x000D_
list-style-type: none; /* disc circle(hollow) square none */_x000D_
text-indent: -2em;_x000D_
}_x000D_
.list-dash li:before {_x000D_
content: '— '; /* em dash */_x000D_
}_x000D_
.list-bullet li:before {_x000D_
content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */_x000D_
}<ul class="list-dash">_x000D_
<li>Item 1</li>_x000D_
<li>Item 2</li>_x000D_
<li>Item 3</li>_x000D_
<li>Item 4</li>_x000D_
</ul>.single-before {_x000D_
list-style: "";_x000D_
list-style-position: outside!important;_x000D_
}<ul class="single-before">_x000D_
<li> is to manifest perfection already in man.</li>_x000D_
<li> is to bring out the best facets of our students personalities.</li>_x000D_
</ul>My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the li:before.
ul {_x000D_
margin-left: 0;_x000D_
padding-left: 0;_x000D_
list-style-type: none;_x000D_
}_x000D_
_x000D_
ul li {_x000D_
position: relative;_x000D_
margin-left: 1em;_x000D_
}_x000D_
_x000D_
ul li:before {_x000D_
position: absolute;_x000D_
left: -1em;_x000D_
content: "+";_x000D_
}<ul>_x000D_
<li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>_x000D_
<li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>_x000D_
<li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>_x000D_
<li>Item 4</li>_x000D_
<li>Item 5</li>_x000D_
</ul>Em dash style:
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}
So many solutions.
But I still think there is room for improvement.
Advantages:
ul {_x000D_
position: relative;_x000D_
list-style: none;_x000D_
margin-left: 0;_x000D_
padding-left: 1.2em;_x000D_
}_x000D_
ul li:before {_x000D_
content: "+";_x000D_
position: absolute;_x000D_
left: 0;_x000D_
}<ul>_x000D_
<li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>_x000D_
<li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>_x000D_
</ul>It's advisable to qualify the styling of the <li> so it does not affect <ol> list items. So:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
content: "+";
padding-right: 5px;
}
This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
You can use the :before pseudo-selector to insert content in front of the list item. You can find an example on Quirksmode, at http://www.quirksmode.org/css/beforeafter.html. I use this to insert giant quotes around blockquotes...
HTH.
try this
ul.a {_x000D_
list-style-type: circle;_x000D_
}_x000D_
_x000D_
ul.b {_x000D_
list-style-type: square;_x000D_
}_x000D_
_x000D_
ol.c {_x000D_
list-style-type: upper-roman;_x000D_
}_x000D_
_x000D_
ol.d {_x000D_
list-style-type: lower-alpha;_x000D_
}_x000D_
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<p>Example of unordered lists:</p>_x000D_
<ul class="a">_x000D_
<li>Coffee</li>_x000D_
<li>Tea</li>_x000D_
<li>Coca Cola</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="b">_x000D_
<li>Coffee</li>_x000D_
<li>Tea</li>_x000D_
<li>Coca Cola</li>_x000D_
</ul>_x000D_
_x000D_
<p>Example of ordered lists:</p>_x000D_
<ol class="c">_x000D_
<li>Coffee</li>_x000D_
<li>Tea</li>_x000D_
<li>Coca Cola</li>_x000D_
</ol>_x000D_
_x000D_
<ol class="d">_x000D_
<li>Coffee</li>_x000D_
<li>Tea</li>_x000D_
<li>Coca Cola</li>_x000D_
</ol>_x000D_
_x000D_
</body>_x000D_
</html>I prefer to use negative margin, gives you more control
ul {
margin-left: 0;
padding-left: 20px;
list-style: none;
}
li:before {
content: "*";
display: inline;
float: left;
margin-left: -18px;
}
You can make use of ::marker pseudo element. This is useful in situations when you need to have different character entities for each list item.
ul li::marker {
content: " "; /* Your symbol here */
}
ul li:nth-child(1)::marker {
content: "\26BD ";
}
ul li:nth-child(2)::marker {
content: "\26C5 ";
}
ul li:nth-child(3)::marker {
content: "\26F3 ";
}
ul li::marker {
font-size: 20px;
}
ul li {
margin: 15px 0;
font-family: sans-serif;
background: #BADA55;
color: black;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
}<ul>
<li>France Vs Croatia</li>
<li>Cloudy with sunshine</li>
<li>Golf session ahead</li>
</ul>Source: Stackoverflow.com