动态将自定义有序列表标记右对齐

要动态将自定义有序列表标记右对齐，可以使用CSS中的伪元素和属性来实现。以下是一个示例代码，演示了如何将自定义有序列表标记右对齐。

HTML代码：

<ol class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

CSS代码：

.custom-list {
  counter-reset: custom-counter;
  list-style-type: none;
  padding-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 30px; /* 调整缩进距离 */
  margin-bottom: 10px;
}

.custom-list li:before {
  content: counter(custom-counter);
  counter-increment: custom-counter;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
}

在这个示例中，我们创建了一个带有自定义有序列表标记的有序列表，并使用CSS来控制其样式。

首先，我们设置了.custom-list类的counter-reset属性，用于重置自定义计数器。

接下来，我们将list-style-type属性设置为none，以隐藏默认的有序列表标记。

然后，我们给每个列表项（li元素）添加了一些样式。我们设置了padding-left属性来控制缩进距离，并设置margin-bottom属性来添加列表项之间的间距。

最后，我们使用伪元素::before来创建自定义的有序列表标记。我们设置了content属性为counter(custom-counter)，用于显示自定义计数器的值。使用counter-increment属性递增计数器的值。然后，我们使用position属性将标记定位到列表项的右上角，使用right和top属性将标记移动到正确的位置。最后，我们使用transform属性的translateX(100%)值将标记向右移动，以实现右对齐效果。

这样，我们就实现了动态将自定义有序列表标记右对齐的效果。