css - intermitent lines between :before and :after elements on certain Zoom measurements. -


.green-right:before{content:"";width: 0; height: 0;border-left: 9px solid transparent;border-right: 5px solid #53c6d3;border-bottom: 9px solid transparent;border-top: 9px solid transparent;position: absolute;top:0; left:-14px;} .green-right {margin:5px 0px 5px -6px; width:12px;height:18px; left:50%; cursor:pointer; float:left;background-color:#53c6d3;position: relative; padding:0 !important;} .green-right:after{content: ""; z-index:1;width: 0; float:left;position: absolute;left: 12px; border-left: 5px solid #53c6d3;border-right: 9px solid transparent;border-bottom: 9px solid transparent;border-top: 9px solid transparent;} 

the above code creates element:

enter image description here


as can see, on screen widths, i"m getting these white lines between before , after elements. how prevent happening?


here codepen: codepen

when zoom in , out, can see unwanted line / lines.


Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

php - How do you embed a video into a custom theme on WordPress? -