Css 用实际元素替换：：after

我在这里为

.checkbox--styled:：after

做了这个CSS声明。我的问题是：如果这一切只是在DOM中的

.checkbox--styled

元素之后添加一个元素，为什么我不能将其替换为

.checkbox--styled--after

并添加一个标记

，然后得到相同的结果

.checkbox--styled::after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  transform: translate(-50%, -50%) scale(0);
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
  transition-delay: initial;
  transition-property: transform;
  z-index: 2;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E");
}

---

：用于调用伪元素

“：：after选择器在每个选定元素的内容后插入内容。”

---

对于您的回答，我必须说它不起作用，因为“content属性（您在css第2行中使用的）与：：before和：：after伪元素一起使用，以插入生成的内容。”

css规则：：after是在复选框上创建精美动画的规则，这样做只是为了避免在html标记中创建更多的元素。它以一套非常复杂的css规则为代价，使html保持简单

当然，您可以在html小部件中创建其他元素并按照您所说的操作，但是您必须在您想要使用复选框的任何地方携带更大的html结构。这没问题，由你决定

---

在我看来，这是一个很好的特色css练习。

当然，您可以用真实元素替换伪元素。这实际上是一件非常直截了当的事情。对于

：：在

元素之前，在父元素中的任何内容之前插入真实元素；对于

：：在

元素之后，在所有内容之后插入它（就在结束标记之前）

但要使检查效果正常工作，需要更改下面的选择器。这些选择器需要更改，因为它们是生成复选框动画的两个选择器

.checkbox:checked~.checkbox--styled:：after
.checkbox:undeterminate~.checkbox--styled:：after

至

.checkbox:checked~.checkbox--styled.checkbox--styled--after
.checkbox:不确定~.checkbox--styled.checkbox--styled--after

*{
盒影：无；
}
.复选框--容器{
职位：相对
}
.收音机，
.复选框，
.收音机-风格，
.checkbox--已设置样式{
显示：块；
位置：绝对位置；
左：0px；
顶部：0px；
高度：16px；
宽度：16px；
边框顶部宽度：1px；
右边框宽度：1px；
边框底宽：1px；
左边框宽度：1px；
边框顶部样式：实心；
右边框样式：实心；
边框底部样式：实心；
左边框样式：实心；
边框顶部颜色：rgb（211219226）；
右边框颜色：rgb（211219226）；
边框底色：rgb（211219226）；
左边框颜色：rgb（211219226）；
边界图像源：初始；
边界图像切片：初始；
边框图像宽度：初始；
边界图像开始：初始；
边界图像重复：初始；
背景色：rgb（255、255、255）；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
框大小：边框框；
垂直对齐：中间对齐；
}
.checkbox--已设置样式{
边框左上半径：3px；
边框右上角半径：3px；
边框右下半径：3px；
边框左下半径：3px；
z指数：1；
}
.checkbox--已设置样式--在{
/*内容：“”；--这对于实际元素不是必需的，但当实际元素没有内容时，它不会造成任何损害*/
显示：块；
高度：10px；
宽度：10px；
位置：绝对位置；
最高：50%；
左：50%；
背景色：透明；
背景位置x:50%；
背景位置y:50%；
背景尺寸：封面；
background-repeat-x：无重复；
背景重复y：无重复；
转换：转换（-50%，-50%）比例（0）；
过渡时间：0.15s；
过渡定时功能：易进易出；
过渡延迟：初始；
过渡性质：变换；
z指数：2；
背景图片：url("数据：image/svg+xml；charset=US-ASCII，%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20%20xmlns%3D%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3ecrcle%2Cline%2Cpath%2Cpolygon%2Crect%2Ctext%7fill%3A%23479ccf%20%213b%3B%3B%3C%3B%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2%201.7%200l14.3-14c.5-.5-4.5%1.1%200-1.6z%22%3E）；
}
.checkbox:active~.checkbox——已设置样式，
.checkbox:focus~.checkbox——已设置样式{
边框顶部颜色：#479ccf；
右边框颜色：#479ccf；
边框底色：#479ccf；
左边框颜色：#479ccf；
}
.checkbox:checked~.checkbox--styled.checkbox--styled--after{
转换：转换（-50%，-50%）比例（1）；
}
.checkbox:不确定~.checkbox--styled.checkbox--styled--after{
转换：转换（-50%，-50%）比例（1）；
背景图像：url（“数据：image/svg+xml；charset=US-ASCII，%3cssvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2fssvg%22%20viewBox%3D%220%200%2012%22%20enable background%3D%22new%200%200%2012%2012%22%3E%20type%22text%2Fcss%22%3ecrcle%2celope%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%7fill%3A%23479ccf%20%217b%3B%3C%3C%3C20d%3D%22M6%200%22%2F%3E%3Cpath%20d%22M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z%22%2F%3E%2F%3E%3E”）；
}
锂，
形式，
输入{
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
}
输入{
字体大小：13px；
线高：18px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
输入，
文本区{
框大小：边框框；
宽度：100%；
最大宽度：100%；
垂直对齐：顶部；
高度：28px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：13px；
垫面：4px；
右侧填充：4px；
垫底：4px；
左侧填充：4px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
边框顶部宽度：1px；
右边框宽度：1p