css - 如何在列表中的文本之前对齐伪标记？

Question

我正在尝试将列表中的文本右对齐，并在其前面显示一个伪图标。该图标确实出现在文本之前，但它位于列表项的左边缘。我希望它出现在文本之前。

像这样:

           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

这是我的代码:

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

我已经尝试了一些方法，比如向 li 元素添加“display: inline-block”，但没有奏效。

我会继续尝试一些事情，但我没有任何运气。

(我确实想出了一种方法来获得我想要的结果 - 我只是没有使用 :before 属性并制作了图标图像。但是，如果可能的话，我想使用 :before 标签。)

谢谢。

Answer 1

我已经用一个额外的 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>