伪元素前后初学
时间：2023-04-02 19:32:07
HTML
伪元素前后初学使用CodePen进行演示，欢迎点击预览定义先看MDN的定义：::beforecreatesapseudo-elementasthe被选元素的第一个子元素，通常通过content属性给元素添加装饰性内容。::after创建一个伪元素作为被选元素的最后一个子元素，通常通过content属性向元素添加装饰性内容。语法/*CSS3语法*/element::before{style}/*(单冒号)CSS2*/element:before{style}CSS3引入::来区分伪类和伪元素。使用加引号先看基本用法，在q标签前后加上?和?。HTML一些引用，
他说，总比没有好。
CSSq::before{content:"?";颜色：蓝色；}q::after{内容：“?”；color:red;}ResultAddingquotationmarksCylinder绘制一个圆柱体的正面图形。HTML
CSS.vat{width:160px;高度：160px；边界半径：160px；背景色：#919191；位置：相对；}.vat::before{内容：“”；宽度：160px；高度：40px；背景色：白色；位置：绝对；}.vat:after{内容：“”；宽度：160px；高度：10px；背景色：白色；位置：绝对；bottom:0;}Resultvat绘制一个圆形方孔。HTML
CSS.money{width:160px;高度：160px；边界半径：160px；背景色：#8b653a；位置：相对；}.money:after{内容：“”；宽度：50px；高度：50px；背景色：白色；位置：绝对；打钩。HTML
CSSli{list-style-type:none;位置：相对；边距：2px；填充：0.5em0.5em0.5em2em；背景：浅灰色；font-family:sans-serif;}li.done{background:#CCFF99;}li.done::before{content:'';位置：绝对；边框颜色：#009933；边框样式：实心；边框宽度：00.3em0.25em0；高度：1em；顶部：1.3em；左：0.6em；保证金顶部：-1em；变换：旋转（45度）；宽度：0.5em;}Javascriptvarlist=document.querySelector('ul');list.addEventListener('click',function(ev){if(ev.target.tagName==='LI'){ev.target.classList.toggle('done');}},false);ResultTodoList参考[1]::before
