css - 如何将 'content' 定位在 p 元素的行尾？

Question

我希望在某些段落的行尾有一个 ■ unicode 字符。但是，使用 :after 我只让它出现在相关段落之后:

.end:after {
  content: "■";
}

<p class="end"> Hello World, Lorem Ipsum msan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie </p>

我尝试在伪类上设置 text-align: right，但似乎没有用。

有其他人设法做到这一点吗？

Answer 1

您可以将 ::after 伪元素向右浮动:

.end {
  clear: both;
}

.end:after {
  float: right;
  content: "■";
}

<p class="end"> Hello World, Lorem Ipsum msan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie </p>