首页 > 代码库 > [CSS] Draw Simple Icons with CSS
[CSS] Draw Simple Icons with CSS
Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.
const Radio = ({ active, children, onChange}) => { return ( <label className="filter"> <input checked={active} type="radio" name="filter" className="filter__radio" onChange={e => { onChange(); }} /> <span className={`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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。