HTML List-Style-Type Dash

HTML list-style-type dash

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.

list-style-type string value works fine, even though it is not a valid value

According to MDN https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type it si possible to use string as value of list-style-type. The problem is that, not every browser supports it - for example Safari or Edge. For now I recommend using ::before as best solution.

How can I have dashes on my ul li, when some of my li's have two lines (ipad)

With an iPad you've got access to the :before pseudo-element, allowing you to use:

ul li{
    padding-left: 1em;
    position: relative; 
}

ul li:before {
    content: '-';
    position: absolute;
    left: 0;
}

JS Fiddle demo

list style is not changing. still displaying the dot at the beginning

you can try like this:

<ul class="item-list">
  <li>Item One</li>
  <li>Item Two</li>
</ul>

// In this css file add bellow

ul.item-list {
  list-style-type: none;
}

Unable to style HTML list elements with bullet points

display: block; is all fine and dandy, but it isn't what you're looking for. In 'style.css' change

ul.new li {display: block;}

to

ul.new li {display: list-item;}

And the discs show up just perfectly. If you want list-items, use list-items. Cheers.

Can't change the list-style-type of a ::marker

::marker is a pseudo with a limited set of properties, not an element with list-style property. Use simply ul li ul li {

Read more on: ::marker - Allowable Properties

ul li ul li {
  list-style: square;
}

ul li ul li::marker {
  color: red;
}

<ul>
  <li>
    <ul>
      <li>this is a test</li>
    </ul>
  </li>
</ul>

  html,
  body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#the-list li {
  margin: 2em 0;
}

#the-list li:first-child {
  color: red;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2300800066" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>');
}

#the-list li:last-child {
  color: blue;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23B2222266" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

<div id="container">
  <div id="content">
    <ul id="the-list">
      <li>FIRST ... <span>word</span></li>
      <li>LAST ... <span>word</span></li>
    </ul>
  </div>
</div>