Replace ::after with actual element

Question

I have this CSS declaration here for .checkbox--styled::after. My question is: if all this does is add an element after the .checkbox--styled elements in the DOM, why can't I replace this to .checkbox--styled--after and add a tag <span class="checkbox--styled--after"></span> and get the same results?

.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

Of-course you can replace pseudo-elements with real elements. It is actually a very straight-forward thing to do. For ::before elements, insert the real element before any content inside parent and for the ::after elements, insert it after all content (just before the end tag).

But for the check-effect to work properly, the below selectors need to be changed. These selectors need to be changed because these are the two selectors that are producing the checkbox animation.

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

to

.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>

---

Changing them to be like below would not work because the .checkbox--styled--after element is not a direct sibling of the checkbox. So, it should be selected by first referencing the parent element which is a sibling of the checkbox.

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

Answer 2

The ::after css rule is what is creating that fancy animation on the checkbox, and this has been done this way just to avoid creating more elements in the html markup. It keeps simple your html at the cost of a quite elaborated css set of rules.

Of course you could create additional elements in your html widget and do as you say, but you'll have to carry a larger html structure everywhere you want to use the checkbox. There's no problem on that, and is up to you.

In my opinion this is a nice featured css exercise.

Answer 3

:: is for calling Pseudo-Elements.

http://www.w3schools.com/cssref/sel_after.asp "The ::after selector inserts something after the content of each selected element(s)."

http://www.w3schools.com/cssref/pr_gen_content.asp For your answer I have to say it doesn't work because "The content property (that you have used on line 2 of this css) is used with the ::before and ::after pseudo-elements, to insert generated content."