css - Different::before 在 anchor 的第一行和附加行上

Question

我当前的元素想要在一些 anchor (A) 的前面进行装饰，到目前为止，这是通过使用::before 完成的。然而，它显示一些链接会换行，然后第二行和最终的附加行将与装饰左对齐，如果它与第一行的文本对齐会更好。

我希望有一个 fiddle 可以解释我们正在努力实现的目标。 .fake 类只是为了演示它的外观，当然不是尝试解决它:https://jsfiddle.net/p0jLoyqz/

.decorated::before {
    content: ">",
    font-weight: 800
}

一个解决方案可能是将 anchor 包装在另一个元素中，然后将装饰添加到包装器中，但最好尽可能减少标记。

Answer 1

您可以制作伪元素 position:absolute; 并将其定位在 left:0; 并为容器提供一个 padding 的 10px 或15px

.small-box {
    width: 120px;
    border: 1px solid gray;
    padding-left: 10px;
    position: relative;
}
.small-box a::before {
    content: '>';
    display: inline-block;
    position: absolute;
    left: 0px;
}

<div class="small-box">
    <a class="fake" href="#">my link that line breaks</a>
</div>