Is there a way to create a list-style in HTML with a dash (i.e. - or – – or — —) i.e.
<ul>
<li>abc</li>
</ul>
Outputting:
- abc
It's occurred to me to do this with something like li:before { content: "-" };, though I don't know the cons of that option (and would be much obliged for feedback).
More generically, I wouldn't mind knowing how to use generic characters for list items.
This question is related to
html
css
xhtml
html-lists
There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.
ul {_x000D_
margin: 0;_x000D_
}_x000D_
ul.dashed {_x000D_
list-style-type: none;_x000D_
}_x000D_
ul.dashed > li {_x000D_
text-indent: -5px;_x000D_
}_x000D_
ul.dashed > li:before {_x000D_
content: "-";_x000D_
text-indent: -5px;_x000D_
}Some text_x000D_
<ul class="dashed">_x000D_
<li>First</li>_x000D_
<li>Second</li>_x000D_
<li>Third</li>_x000D_
</ul>_x000D_
<ul>_x000D_
<li>First</li>_x000D_
<li>Second</li>_x000D_
<li>Third</li>_x000D_
</ul>_x000D_
Last textI do not know if there is a better way, but you can create a custom bullet point graphic depicting a dash, and then let the browser know you want to use it in your list with the list-style-type property. An example on that page shows how to use a graphic as a bullet.
I have never tried to use :before in the way you have, although it may work. The downside is that it will not be supported by some older browsers. My gut reaction is that this is still important enough to take into consideration. In the future, this may not be as important.
EDIT: I have done a little testing with the OP's approach. In IE8, I couldn't get the technique to work, so it definitely is not yet cross-browser. Moreover, in Firefox and Chrome, setting list-style-type to none in conjunction appears to be ignored.
Use this:
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
In my case adding this code to CSS
ul {
list-style-type: '- ';
}
was enough. Simple as it is.
You can just set li::marker like so:
li::marker {
content: '- ';
}
Here's a version without any position relative or absolute and without text-indent:
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
Enjoy ;)
Here is my fiddle version:
The (modernizr) class .generatedcontent on <html> practically means IE8+ and every other sane browser.
<html class="generatedcontent">
<ul class="ul-dash hanging">
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
</ul>
CSS:
.ul-dash {
margin: 0;
}
.ul-dash {
margin-left: 0em;
padding-left: 1.5em;
}
.ul-dash.hanging > li { /* remove '>' for IE6 support */
padding-left: 1em;
text-indent: -1em;
}
.generatedcontent .ul-dash {
list-style: none;
}
.generatedcontent .ul-dash > li:before {
content: "–";
text-indent: 0;
display: inline-block;
width: 0;
position: relative;
left: -1.5em;
}
What worked for me was
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
For anyone having this problem today, the solution is simply:
list-style: "- "
Let me add my version too, mostly for me to find my own preferred solution again:
ul {_x000D_
list-style-type: none;_x000D_
/*use padding to move list item from left to right*/_x000D_
padding-left: 1em;_x000D_
}_x000D_
_x000D_
ul li:before {_x000D_
content: "–";_x000D_
position: absolute;_x000D_
/*change margin to move dash around*/_x000D_
margin-left: -1em;_x000D_
}<!-- _x000D_
Just use the following CSS to turn your_x000D_
common disc lists into a list-style-type: 'dash' _x000D_
Give credit and enjoy!_x000D_
-->_x000D_
Some text_x000D_
<ul>_x000D_
<li>One</li>_x000D_
<li>Very</li>_x000D_
<li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>_x000D_
<li>Approach!</li>_x000D_
</ul>Another way:
li:before {
content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
list-style: none;
text-indent: -1.5em;
padding-left: 1.5em;
}
Instead of using lu li, used dl (definition list) and dd.
<dd> can be defined using standard css style such as {color:blue;font-size:1em;} and use as marker whatever symbol you place after the html tag. It works like ul li, but allows you to use any symbol, you just have to indent it to get the indented list effect you normally get with ul li.
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
Gives you much cleaner code! That way, you could use any type of character as marker! Indent is of about -10px and it works perfect!
HTML
<ul>
<li>One</li>
<li>Very</li>
<li>Simple</li>
<li>Approach!</li>
</ul>
CSS
ul {
list-style-type: none;
}
ul li:before {
content: '-';
position: absolute;
margin-left: -20px;
}`
My solution is in adding extra span tag with mdash in it:
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</span>XYZ</li>
</ul>
and adding to css:
ul.mdash-list
{
list-style:none;
}
ul.mdash-list li
{
position:relative;
}
ul.mdash-list li .mdash-icon
{
position:absolute;
left:-20px;
}
One of the top answers did not work for me, because, after a little bit trial and error, the li:before also needed the css rule display:inline-block.
So this is a fully working answer for me:
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
demo fiddle
CSS:
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Source: Stackoverflow.com