Javascript 如何将动画检查表按钮放置在文本右侧

我正在使用我找到的一个模板表单，它给了我一个整洁的清单表单，我可以用它来开发一个网站（我这样做是为了学习） 所以我想知道如何制作这些按钮：

出现在文本的右侧（我想使用RTL语言）

为了让它更简单，这里是小提琴：

我试图修改css代码，在一些属性中添加了“margin:right”，但没有成功：

    body {
  background: #069ffb;
  color: #fff;
}

.ac-custom {
  padding: 0 3em;
  max-width: 900px;
  margin: 0 auto;
}

.ac-custom ul,
.ac-custom ol {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.ac-custom li {
  margin: 0 auto;
  padding: 2em 0;
  position: relative;
}

.ac-custom label {
  display: inline-block;
  position: relative;
  font-size: 2em;
  padding: 0 0 0 80px;
  vertical-align: top;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom label::before {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 0;
  margin-top: -25px;
  position: absolute;
  cursor: pointer;
}

.ac-custom input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
}

.ac-custom label::before {
  content: '';
  border: 4px solid #fff;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ac-radio label::before {
  border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label {
  color: #fff;
}

.ac-custom input[type="checkbox"]:checked + label::before {
  opacity: 0.8;
}


/* General SVG and path styles */

.ac-custom svg {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  left: 5px;
  pointer-events: none;
}

.ac-custom svg path {
  stroke: #fdfcd3;
  stroke-width: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}


/* Box Fill */

.ac-boxfill svg path {
  stroke-width: 8px;
}

我需要知道在那里要改变什么。

---

正如我之前所说的，这是我为了学习而做的事情，这是我学习的方式，至少，我采取一些已经起作用的东西，并尝试找出是什么让一切都起作用。

从标签中删除

填充

，并将所需的像素量添加到css中复选框的

左侧。还要将像素量添加到
svg
像这样：

请参见
从标签中删除
填充
，并将所需的像素量添加到css中复选框的
左侧
。还要将像素量添加到
svg
像这样：

请参见在css末尾添加以下代码

.ac-custom label {
  padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
    left: 40px;
}
.ac-custom svg {    
    top: 54%;
    left: 49px;
}

更新：
在css末尾添加以下代码

.ac-custom label {
  padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
    left: 40px;
}
.ac-custom svg {    
    top: 54%;
    left: 49px;
}

更新：
查看更新，第一次没有更新，我更新了链接和Fiddle，这很好，但是选择时列表上的第一个元素文本没有突出显示查看更新，没有看到第一次更新，我更新了链接和Fiddle，这很好，但是选择时列表上的第一个元素文本没有突出显示这很好，但在我的代码中，由于某种原因，文本位于框的顶部，所有内容都缩进到left@wannabeprogrammer：用小提琴或url向我显示以选中“不共享图像”。这对我调试没有帮助。给我一个实时的例子。你必须使用jQuery来实现这一点。根据标签宽度动态设置复选框中“left”的值，您可以使用.width（）jQuery函数进行设置。您介意给我举个例子吗？谢谢。这很好，但在我的代码中，出于某种原因，文本会放在框的顶部，所有内容都缩进到left@wannabeprogrammer：用小提琴或url向我显示以选中“不共享图像”。这对我调试没有帮助。给我一个实时的例子。你必须使用jQuery来实现这一点。根据标签宽度动态设置复选框中“left”的值，您可以使用.width（）jQuery函数进行设置。您介意给我举个例子吗？谢谢