Devm
Devendra Maharjan
Profile
Contact
Tutorials
Javascript
Create popup
Linux
Install LAMP
Magento 2 deploy script
PHP
Bash
CSS
Create line with div
Dynamic icon
Mail
Linkedin
Git Hub
Close
Create Close css icon with dynamic size
<style> .close { position:relative; opacity: 0.3; width: var(--width,32px); height: var(--height,32px); display:none; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: var(--pseudo-left,15px); content: ' '; height: var(--pseudo-height,33px); width: var(--pseudo-width,2px); background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> <script> class Icon { param; constructor(param) { this.param = param; } close(){ const close = document.querySelector(this.param.selector); close.style.setProperty('--height', this.param.height+'px'); close.style.setProperty('--width',this.param.height+'px'); close.style.setProperty('--pseudo-height',this.param.height+'px'); close.style.setProperty('--pseudo-width',Math.floor(6 * this.param.height / 100)+'px'); close.style.setProperty('--pseudo-left', (45 * this.param.height / 100) +'px'); } } function onload(){ const icon = new Icon({selector:".close",height:"20",width:"20"}); icon.close(); } </script> <body onload="onload()"> <a href="#" class="close"> </body>