css - CSS 中的文本对齐

Question

我正在做一个元素，我想在页面右侧的无序列表中添加一些文本，例如

这是演示文本。 o

但它来得像

.This is demo text o

在页面右侧

o 是子弹。

我使用了 direction: rtl;为了这。我也尝试过 float 等来达到所需的结果，但没有成功。

谁能告诉我如何实现上述结果？

Answer 1

您可能不想使用 direction: rlt;——据我了解，它更适合实际文本方向为从右到左的情况。

实现类似效果的一种快速简便的方法是隐藏普通元素符号并通过 css 替换它们，例如:

.list-right li {
  text-align: right;
  list-style: none;
}
.list-right li:after {
  content: ' \2022'; /* Bullet */
  margin-left: 0.5em;
}

JS Bin demo