Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use an asterisk in list items instead of a bullet

Tags:

html

css

I want to use "*" in one of the bullet items. I have used Pseudo class to one of the element. But i see some blank space before "text2" in below example to the pseudo li element

li {
  list-style: none;
}

li.str:before {
  content: "*";
  position: relative;
  left: -15px;
  bottom: -3px;
}
<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>

Could you please help me here

like image 717
Sumanth Avatar asked Jan 08 '23 20:01

Sumanth


1 Answers

Set your li tags in position relative and your pseudo-element in position absolute :

li {
  position: relative;
  list-style: none;
}
li.str:before {
  content: "*";
  position: absolute;
  left: -15px;
  bottom: -3px;
}
<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>
like image 158
Mehdi Brillaud Avatar answered Jan 18 '23 19:01

Mehdi Brillaud