Unordered list item bullet point sitting above text

Question

I'm still pretty new to CSS so this might be a silly question.

The list uses a hyphen rather than a bullet style. The bullet is sitting above the text line rather than next to the text. I've tried a range of methods that have been offered on here but it's not budging.

Here is the css I've got at the moment:

li { 
  list-style-position: inside;
  position: relative;
  padding-left: inherit;  
}

ul, li:before {
  content: '–'; 
  vertical-align: middle;
  position: relative;
  display: list-item;
}

Answer 1

I had a similar issue once, I solved it removing the p tags from the text inside the list on the HTML file, there was no need to change anything in the CSS. You can put the text inside the li tags without the paragraph tags. This must have something to do with inline and block elements behaviour.

li {
  list-style-position: inside;
}

<!-- notice that the first item has the <p> tag while the second has not -->
<ul>
  <li><p>Some text with the paragraph tag.</p></li>
  <li>Some text without the paragraph tag.</li>
 </ul>

Answer 2

You can target the list style marker with ::marker pseudo class:

ul {
  list-style-position: inside;
}

li {
  background: dodgerblue;
}

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

<ul>
  <li><br>
  God's own country</li>
</ul>