Question

这里有.checkbox--styled::after的CSS声明。我的问题是：如果所有这一切都是在DOM中的.checkbox--styled元素之后添加元素，为什么我不能将其替换为.checkbox--styled--after并添加标记<span class="checkbox--styled--after"></span>并获取相同的结果？

.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");
}

https://jsfiddle.net/bLwa2s05/1/

Answer 1

::用于调用Pseudo-Elements。

http://www.w3schools.com/cssref/sel_after.asp ＆＃34; :: after选择器在每个所选元素的内容之后插入一些内容。＆＃34;

http://www.w3schools.com/cssref/pr_gen_content.asp 对于你的回答我不得不说它不起作用因为＆＃34;内容属性（你在这个css的第2行使用过）与:: before和:: after伪元素一起使用，插入生成的内容。＆＃34;

Answer 2

当然，你可以用真实元素替换伪元素。这实际上是一件非常直截了当的事情。对于::before元素，在父元素内的任何内容和::after元素之前插入real元素，在所有内容之后插入（在结束标记之前）。

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

.checkbox:checked ~ .checkbox--styled::after 
.checkbox:indeterminate ~ .checkbox--styled::after

到

.checkbox:checked ~ .checkbox--styled .checkbox--styled--after 
.checkbox:indeterminate ~ .checkbox--styled .checkbox--styled--after

* {
  box-shadow: none;
}
.checkbox--container {
  position: relative
}
.radio,
.checkbox,
.radio--styled,
.checkbox--styled {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 16px;
  width: 16px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(211, 219, 226);
  border-right-color: rgb(211, 219, 226);
  border-bottom-color: rgb(211, 219, 226);
  border-left-color: rgb(211, 219, 226);
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-color: rgb(255, 255, 255);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  box-sizing: border-box;
  vertical-align: middle;
}
.checkbox--styled {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  z-index: 1;
}
.checkbox--styled--after {
  /*content: ''; -- This is not required for real elements but it does no harm when the real element has no 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");
}
.checkbox:active ~ .checkbox--styled,
.checkbox:focus ~ .checkbox--styled {
  border-top-color: #479ccf;
  border-right-color: #479ccf;
  border-bottom-color: #479ccf;
  border-left-color: #479ccf;
}
.checkbox:checked ~ .checkbox--styled .checkbox--styled--after {
  transform: translate(-50%, -50%) scale(1);
}
.checkbox:indeterminate ~ .checkbox--styled .checkbox--styled--after {
  transform: translate(-50%, -50%) scale(1);
  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%2012%2012%22%20enable-background%3D%22new%200%200%2012%2012%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%22M6%200%22%2F%3E%3Cpath%20d%3D%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%3C%2Fsvg%3E");
}
li,
form,
input {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
input {
  font-size: 13px;
  line-height: 18px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
input,
textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  vertical-align: top;
  height: 28px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(211, 219, 226);
  border-right-color: rgb(211, 219, 226);
  border-bottom-color: rgb(211, 219, 226);
  border-left-color: rgb(211, 219, 226);
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  display: inline-block;
  color: rgb(34, 34, 34);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.radio,
.checkbox {
  height: auto;
  line-height: 1;
  width: auto;
  max-width: none;
  margin-top: 0px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-width: initial;
  border-right-width: initial;
  border-bottom-width: initial;
  border-left-width: initial;
  border-top-color: initial;
  border-right-color: initial;
  border-bottom-color: initial;
  border-left-color: initial;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  vertical-align: baseline;
  z-index: 2;
  opacity: 0;
}

<div class="checkbox--container">
  <input class="checkbox" type="checkbox" />
  <span class="checkbox--styled">
    <span class='checkbox--styled--after'>
    </span>
  </span>
</div>

将它们更改为如下所示，因为.checkbox--styled--after元素不是复选框的直接兄弟。因此，应该首先引用父元素，它是复选框的兄弟元素。

.checkbox:checked ~ .checkbox--styled--after 
.checkbox:indeterminate ~ .checkbox--styled--after

Answer 3

:: css规则是在复选框上创建奇特动画的原因，这样做是为了避免在html标记中创建更多元素。它以简单明了的css规则为代价，简化你的HTML。

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

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

用实际元素替换:: after

3 个答案: