用实际元素替换:: after [英] Replace ::after with actual element

查看：188
本文介绍了用实际元素替换:: after的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个CSS声明这里 .checkbox - styled :: after 。我的问题是：如果所有这都是在 .checkbox - 样式的元素后添加一个元素，为什么我不能替换为 .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％ 20viewBox％3D％220％200％2024％2024％22％20enable-background％3D％22new％200％200％2024％2024％22％3E％3Cstyle％20type％3D％22text％2Fcss％22％3Eircirc％ 2Cline％2C路径％2C多峰％2C多束线％2Crect％2Ctext％7Bfill％3A％23479ccf％20％21重量％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/

解决方案

- 可以用真实元素替换伪元素。这是一个非常直接的事情。对于 :: before 元素，在parent中的任何内容之前插入real元素，并为 :: after



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

  .checkbox：checked〜.checkbox  -  styled :: after 
 .checkbox：indeterminate〜.checkbox  -  styled :: after

到 

  .checkbox ：checked〜.checkbox  - 样式化.checkbox  - 样式 -  
后面.checkbox：不确定〜.checkbox  - 样式化.checkbox  - 样式 -  after 
  / pre> 
 
 
 
 
 
 
 
 
 
 
 
 
 将<$>更改为类似下面的方法不起作用，因为 .checkbox  - 样式 - 后元素不一个直接同级的复选框。因此，应首先引用作为复选框同级的父元素来选择它。
  .checkbox：checked〜.checkbox  -  styled  -  after 
 .checkbox：indeterminate〜.checkbox  -  styled  -  after 
  
 
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/
 解决方案 
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



                        
这篇关于用实际元素替换:: after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆