Замена маркера в списке ul

Вариант 1

ul{
  list-style:none;
  margin:0;
  padding: 0;
}
li{
  padding:5px;
  font-size:16px;
}
 
li:before{
  content: '';
  display: inline-block;
  height:16px;
  width: 16px;
  vertical-align: middle;
  border-radius:50%;
  background-color:#000;
  margin-right:5px;
}

Вариант 2

ul {
  list-style-type: none;
}
 
li:before {
  content: "\2B24";
}

Источник

Вариант 3

ul {
    margin-left: 20px;
    list-style: none;
}
 
li:before {
    float: left;
    margin-left: 20px;
    margin-right: 11px;
    content: "\2022";
    font-weight: bold;
    
    color: red;
}

Вариант 4

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
 /* юникод точки */
  color: orange; /* Менять цвет */
  font-weight: bold; /* Менять жирность */
  display: inline-block; /* Расстояние между точкой и текстом */
  width: 1em; /* Задать значение расстояния */
}

Вариант 5

 ul {
  list-style: none;
}


span {
  color: cyan;
  font-weight: bold;
  display: inline-block;
    width: 1em;
  font-size: 20px;
}


<ul>
  <li><span>&#9745;</span>Анжелика</li>
  <li><span>&#9745;</span>Анастасия</li>
  <li><span>&#9745;</span>Анатолий</li>
  <li><span>&#9745;</span>Александр</li>
</ul>

Источник

Вариант 6

li {
        list-style: none;
        font-size: 20px;
    }
    
    li:before {
        content:"·";
        font-size:120px;
        vertical-align:middle;
        line-height:20px;
    }


<ul class="moreLinks" >
        <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">...but it appears "inside" when the lines wrap... wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap </a></li>
    
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

Вариант 7

li {
    list-style: none;
   display: list-item;
   margin-left: 50px;
}

li:before {
    content: "";
   border: 5px #000 solid !important;
   border-radius: 50px;
   margin-top: 5px;
   margin-left: -20px;
   position: absolute;
}


<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>

Вариант 8

li {
    list-style-type: none;
    position: relative;    /* It's needed for setting position to absolute in the next rule. */
}

li::before {
    content: '■';
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}
<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

Вариант 9

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}
<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

Вариант 10

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}


<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

Вариант 11

ul{
    padding-left: 0;  /*remove default padding*/
}

li{
    list-style-type: none;  /*remove default styles*/
    padding-left: 1.2em;    
    text-indent:-1.2em;     /*remove padding on first line*/
}

li::before{
    margin-right:     0.5em; 
    width:            0.7em; /*margin-right and width must add up to the negative indent-value set above*/
    height:           0.7em;

    display:          inline-block;
    vertical-align:   middle;
    border-radius: 50%;
    background-color: orange;
    content:          ' '
}

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Источник