список с галочками
список с галочками
by Axelvaisper
HTML
<ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>CSS
ul{ margin: 12px; padding: 0; } ul li{ margin: 0 0 12px 0; font-size: .9em; line-height: 1em; }
body:nth-of-type(1) ul li{ list-style-type:none; padding: 0 0 0 45px; position:relative; }
body:nth-of-type(1) ul li:before{ /*fill it with a blank space*/ content:"\00a0"; /*make it a block element*/ display: block; /*adding an 8px round border to a 0x0 element creates an 8px circle*/ border: solid 9px #000; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; height: 0; width: 0; /*Now position it on the left of the list item, and center it vertically (so that it will work with multiple line list-items)*/ position: absolute; left: 7px; top: 40%; margin-top: -8px; }
body:nth-of-type(1) ul li:after{ /*Add another block-level blank space*/ content:"\00a0"; display:block; /*Make it a small rectangle so the border will create an L-shape*/ width: 3px; height: 6px; /*Add a white border on the bottom and left, creating that 'L' */ border: solid #fff; border-width: 0 2px 2px 0; /*Position it on top of the circle*/ position:absolute; left: 14px; top: 40%; margin-top: -4px; /*Rotate the L 45 degrees to turn it into a checkmark*/ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }