如何在p元素的行尾定位“content”？

Question

我想在我的一些段落的行尾有一个unicode字符。然而，使用:在我只让它出现在有问题的段落之后：

​

.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>

​

Answer 2

根据我的理解，您希望将该统一码代码放在full stop的位置。为此，您可以将其包装在span元素中

​

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

<p> Hello World, Lorem Ipsum msan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi <span class="end"></span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat <span class="end"></span> 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 <span class="end"></span></p>

​