Unicode character as bullet for list-item in CSS
EDIT
I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:
li:before {
content: "\2605";
}
OLD ANSWER
I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.
Here's an example:
<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
User defined Characters as bullets in CSS lists
You can use pseudo-element :before
and define the content you want e.g.:
ul { list-style: none;}
ul li:before { content: "#"; padding-right: 5px;}
<ul> <li>test</li> </ul>
Unicode as bullet not indenting second line
You could use display: flex
property on li
elements. Or you could use display: table
on li
element and display: table-cell
on pseudo-element. DEMO
ul { list-style: none; padding: 0px;}li { display: flex;}ul li:before { content: '\2713'; margin: 0 1em;}
<ul> <li>Single-line.</li> <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li></ul>
Replace bullet points with emojis (or other Unicode characters) (But Don't change nested bullets)
ul.thunderbolt > li:nth-child(1) { list-style: "\26A1 "; list-style-position: outside;}ul.thunderbolt > li:nth-child(2) { margin-top: 10px; list-style: " "; list-style-position: outside;}ul.thunderbolt > li:nth-child(3) { margin-top: 10px; list-style: " "; list-style-position: outside;}ul.thunderbolt > li:nth-child(5) { margin-top: 10px; list-style: " "; list-style-position: outside;}ul.thunderbolt > li:nth-child(6) { margin-top: 10px; list-style: " "; list-style-position: outside;}ul.thunderbolt ul li { margin-top: 10px; list-style-type: circle;}
<ul class="thunderbolt"><li>ThunderBolt devices only get recognized by BootCamp on boot.</li><li>If you unplug your ThunderBolt device while using Windows, you'll have to shut down then reboot your OS to get it recognized again.</li><li>Disable <b>Fast Startup </b>in Windows 8/10.</li><ul><li>Also try holding <b>Shift </b>when you click <b>Start </b>> <b>Shut down</b>.</li></ul><li>Wait a solid chunk of seconds on the login screen after boot to allow BootCamp to configure Thunderbolt devices.</li><li><b>Sleep </b>simply does not work in BootCamp with a ThunderBolt device connected.</li></ul>
Custom bullet symbol for li elements in ul that is a regular character, and not an image
The following is quoted from Taming Lists:
There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:
ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ».
» Item 1
» Item 2
» Item 3
» Item 4
» Item 5 we'll make
a bit longer so that
it will wrap
li:before{ content: ■; } How to Encode this Special Character as a Bullit in an Email Stationery?
Never faced this problem before (not worked much on email, I avoid it like the plague) but you could try declaring the bullet with the unicode code point (different notation for CSS than for HTML): content: '\2022'
. (you need to use the hex number, not the 8226 decimal one)
Then, in case you use something that picks up those characters and HTML-encodes them into entities (which won't work for CSS strings), I guess it will ignore that.
Placing Unicode character in CSS content value
Why don't you just save/serve the CSS file as UTF-8?
nav a:hover:after {
content: "↓";
}
If that's not good enough, and you want to keep it all-ASCII:
nav a:hover:after {
content: "\2193";
}
The general format for a Unicode character inside a string is \000000
to \FFFFFF
– a backslash followed by six hexadecimal digits. You can leave out leading 0
digits when the Unicode character is the last character in the string or when you add a space after the Unicode character. See the spec below for full details.
Relevant part of the CSS2 spec:
Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
- with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
- by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.
If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).
- Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).
The identifier "te\st" is exactly the same identifier as "test".
Comprehensive list: Unicode Character 'DOWNWARDS ARROW' (U+2193).
How to use tick / checkmark symbol (✓) instead of bullets in unordered list?
You can use a pseudo-element to insert that character before each list item:
ul { list-style: none;}
ul li:before { content: '✓';}
<ul> <li>this is my text</li> <li>this is my text</li> <li>this is my text</li> <li>this is my text</li> <li>this is my text</li></ul>
Related Topics
Images Not Displaying in Github Pages
Does HTML5 Change The Standard for HTML Commenting
Where Is Data Stored When Using an HTML 5 Web SQL Database
Onserverclick Event Handler Not Called If Using Onclick
How Put Percentage Width into HTML Canvas (No CSS)
How to Control The Width of Select Tag
HTML Input Range Step as an Array of Values
Display Element as Preformatted Text via CSS
Ring-Shaped Process Spinner with Fading Gradient Effect Around The Ring
CSS-Only Detection of Text Overflows in HTML
HTML 5 Input Type='Date' Disable Keyboard Input
How to Construct a Table Header Than Spans Multiple Rows in HTML
Having Trouble with Attribute != Selector
CSS3 Animation Not Working in Chrome
CSS Height Working But Min-Height Doesn't Work