Как выровнять тег psuedo перед текстом в списке? - PullRequest
Новая
       13

Как выровнять тег psuedo перед текстом в списке?

0 голосов
/ 15 декабря 2018

Я пытаюсь выровнять текст в списке по правому краю с иконкой псевдо, появляющейся прямо перед ним.Значок появляется перед текстом, но он находится у левого края элемента списка.Я бы хотел, чтобы он появился прямо перед текстом.

Вот так: 

           ICON this is text
      ICON this is more text
ICON this is still more text

Прямо сейчас это выглядит так: 

ICON            this is text
ICON       this is more text
ICON this is still more text

Вот мойcode: 

    ul {
        counter-reset: a;
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 28px;
        li {
            position: relative;
            margin: 0 0 12px 0.8em;
            padding: 4px 8px;
            list-style-type: none;
            font-size: 20px;
            float: right;
            text-align: right;
            &:before {
                content: "";
                position: absolute;
                top: 10px;
                left: -17px;
                width: 16px;
                height: 17px;
                margin-right: 8px;
                background: url('/images/checkmark.png') no-repeat left top;
            }
        }
    }

Я пробовал пару вещей, таких как добавление display: inline-block к элементам li, но это не сработало.

Я продолжу пробовать пару вещей, но мне не повезло.

(Я нашел способ получить желаемые результаты - я просто не использовал свойство: before и сделал изображения значков. Однако я бы хотел использовать тег: before, есливозможно.)

Спасибо.

1 Ответ

0 голосов
/ 19 декабря 2018

Я реализовал его с помощью дополнительного элемента p и стилизовал его так, как вы хотите. 

  ul {
        counter-reset: a;
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 28px;
 }
        li {
            position: relative;
            margin: 0 0 12px 0.8em;
            padding: 4px 8px;
            list-style-type: none;
            font-size: 20px;
            text-align: right;
      }
      li p {
        display: inline-block;
        position: relative;
      }
      li p:before {
                content: "";
                position: absolute;
                top: 2px;
                left: -17px;
                width: 16px;
                height: 17px;
                margin-right: 8px;
                background-color: red;
                /*background: url('http://pluspng.com/img-png/tick-box-png-checked-checkbox-icon-png-50-px-1600.png') no-repeat left top;*/
    }
<ul>
<li><p>this is text</p>
</li>
<li><p>this is more text</p>
</li>
<li><p>this is still more text</p></li>
</ul>
...