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>

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

1 个答案: