Как заменить маркер LI, чтобы он не сдвигал строку?

Question

[Посторонним В.]

Хочу заменить маркеры списка, прописал вот так:

ul {
    list-style-type: none
}

ul > li:before {
    content: "● ";
    color: #83b700;
    font-size: 1.2em;
    float: left;
}

Но теперь у меня первая строка элемента списка сдвигается на ширину этого маркера.

Как сделать, чтобы маркер был слева, напротив первой строки, но не смещал её?

Comments

[Сергей delphinpro]

&::before {
  content: "● ";
  font-family: monospace; // одинаковая ширина символов
  margin-left: -2ch; // влево на два символа
}

[sergski]

list-style-image: url('mark.png') не?

[Посторонним В.]

Сергей, спасибо, оно!

Answer 1

[Посторонним В.]

Сработало вот так:

&::before {
  content: "● ";
  font-family: monospace; // одинаковая ширина символов
  margin-left: -2ch; // влево на два символа
}

Спасибо Сергею.

Answer 2

[Ankhena]

Например, так: https://jsfiddle.net/u9q4mxq5/

Comments

[Сергей delphinpro]

Еще вариант для автора
https://jsfiddle.net/u9q4mxq5/1/
https://jsfiddle.net/u9q4mxq5/3/

[Ankhena]

Сергей, балуете :)

Answer 3

[Evgeniy Kvasyuk]

https://jsfiddle.net/EvgeniyKvasyuk/5cnnzwuk/3/ почти как у Ankhena только со смещением, а то отступ потерялся

Comments

[Ankhena]

ну да, я поленилась делать все за автора вопроса

[Сергей delphinpro]

Evgeniy Kvasyuk,
Если дорабатывать вариант от Ankhena, то лучше так
https://jsfiddle.net/u9q4mxq5/4/

[Evgeniy Kvasyuk]

Сергей, как вариант, а вообще у задачи вагон и телега решений