[CSS] Draw Simple Icons with CSS

Using pseudo-elements like ::before and ::after we can draw some simple icons without have using image assets which can help Reduce the number of requests and improve performance.

Const Radio = ({active, Children, onChange}) = = {return (<labelClassName= "Filter">      <inputchecked={active}type= "Radio"name= "Filter"ClassName= "Filter__radio"OnChange={e =>{onChange (); }}/><spanClassName={' Filter__label--${children.tolowercase ()} '}>{Children}</span>    </label>  );};

[class^= "Filter__label"]{position:relative;Display:Inline-block;Padding-left:16px;Color:Rgba (236,240,241,0.3);}[class^= "Filter__label"]:hover{Color:#ccc;}. filter__radio:checked + [class^= "Filter__label"]{Color:#fff;}[class^= "Filter__label"]::before,.filter__label--all::after{content:"';position:Absolute;Top:5px; Left:0;background:#647380;Display:Block;width:10px;Height:10px;Border-radius:5px;Box-shadow:0 0 2px 1px rgba (0,0,0,0.2);}. Filter__radio{position:Absolute;Opacity:0;}. Filter__label--all{Padding-left:21px;}. Filter__label--all::after{ Left:5px;}. filter__radio:checked +. Filter__label--all::before{background:#af544f;}. filter__radio:checked +. Filter__label--all::after{background:#16a085;}. filter__radio:checked +. Filter__label--active::before{background:#af544f;}. filter__radio:checked +. Filter__label--completed::before{background:#16a085;}@media only screen and (min-width:730px){. Container {max-width:720px;justify-content:Flex-end; }. Todo-app{Border-radius:4px 4px 0 0; }. Todo-list{Order:-1;flex-direction:column; }[class^= "Todo-list__item"]{Box-shadow:0 1px 0 0 #e6e6e6, 0 2px 0 0 White; }. Filters{Border-radius:3px 3px 0 0;Order:0; }}

[CSS] Draw Simple Icons with CSS