HTML list-style-type dash

HtmlCssXhtmlHtml Lists

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}


Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Solution 2 - Html

You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.

A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.

Solution 3 - Html

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 ;)

Solution 4 - Html

Use this:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Solution 5 - Html

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

demo fiddle

Solution 6 - Html

In my case adding this code to CSS

ul {
	list-style-type: '- ';
}

was enough. Simple as it is.

Solution 7 - Html

Let me add my version too, mostly for me to find my own preferred solution again:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}


<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <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>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

Solution 8 - Html

ul {
  list-style-type: '-';
}

You can refer to MDN

Solution 9 - Html

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;
    }
  }
}

Solution 10 - Html

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

Solution 11 - Html

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;
}

Solution 12 - Html

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;    
}

Solution 13 - Html

For anyone having this problem today, the solution is simply:

list-style: "- "

Solution 14 - Html

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;
}`

Solution 15 - Html

I 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.

Solution 16 - Html

My solution is in adding extra span tag with mdash in it:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</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;
}

Solution 17 - Html

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Solution 18 - Html

You can just set li::marker like so:

li::marker {
   content: '- ';
}

Solution 19 - Html

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!

Solution 20 - Html

  • When using symbols that do not exist on the keyboard, see HTML entities and use CSS code values for the list-style-type property. See the list of CSS codes at HTML Character Entity References for different symbols.
  • For symbols that are there on the keyboard, use the keyboard symbols directly as values to the list-style-type property.

See example code below:

<!-- See HTML entities for symbols NOT on the keyboard -->
<h3>HTML Entities: Long Rightwards Double Arrow</h3>
<ul style="list-style-type: '\27F9';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Use symbols on the keyboard directly -->
<h3>Dash symbol on the keyboard</h3>
<ul style="list-style-type: '-';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Solution 21 - Html

What worked for me was

<ul>
 	<li type= "none">  &ndash; line 1 </li>
 	<li type= "none">  &ndash; line 2 </li>
 	<li type= "none">  &ndash; line 3 </li>
</ul>
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Xhtml Solutions
Recommended Html Lists Solutions

Previous Solution:

How to filter a dictionary according to an arbitrary condition function?

PythonDictionaryFilter

Next Solution:

How to tell a Mockito mock object to return something different the next time it is called?

JavaUnit TestingJunitMockingMockito

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrian M. HuntView Question on Stackoverflow
Solution 1 - Htmlaron.lakatosView Answer on Stackoverflow
Solution 2 - HtmlDarko ZView Answer on Stackoverflow
Solution 3 - HtmlvelopView Answer on Stackoverflow
Solution 4 - HtmlJaseView Answer on Stackoverflow
Solution 5 - HtmlKeyan ZhangView Answer on Stackoverflow
Solution 6 - HtmlAlbert SosnowskiView Answer on Stackoverflow
Solution 7 - HtmlthreeView Answer on Stackoverflow
Solution 8 - HtmlBrady HuangView Answer on Stackoverflow
Solution 9 - HtmlJoeryView Answer on Stackoverflow
Solution 10 - Htmluser3849374View Answer on Stackoverflow
Solution 11 - HtmlbiziclopView Answer on Stackoverflow
Solution 12 - HtmliimosView Answer on Stackoverflow
Solution 13 - HtmlBee BatView Answer on Stackoverflow
Solution 14 - HtmlRitu GuptaView Answer on Stackoverflow
Solution 15 - HtmlTNiView Answer on Stackoverflow
Solution 16 - HtmlVictor StagurovView Answer on Stackoverflow
Solution 17 - HtmlblackchestnutView Answer on Stackoverflow
Solution 18 - HtmltrashtaturView Answer on Stackoverflow
Solution 19 - HtmlCarolyne ComtoisView Answer on Stackoverflow
Solution 20 - HtmlmyverdictView Answer on Stackoverflow
Solution 21 - HtmlC oneilView Answer on Stackoverflow