'Unordered list item bullet point sitting above text

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.

enter image description here

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


Solution 1:[1]

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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 T J
Solution 2 Erike Nascimento

Related Questions