Styled Bullets

by Markus Steiger

HTML

<div>
    <ul>
	<li>It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);</li>
	<li>It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;</li>
	<li>Need to write some words in italic or so? No problem, this will work out.</li>
</ul>
</div>

CSS

/* styles for demo only */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

div {
    max-width: 70%;
    margin: 0 auto;
    margin-top: 7%;
    font: 110%/150% normal 'Open Sans', sans-serif;
}

@media (max-width: 580px) {
    div { max-width: 90%; font: 90%/140% normal 'Open Sans', sans-serif; }
    li:before { top: 2px; }
}

/* end styles demo only */


ul, ol {
    margin: 0;
    list-style: none;
}

li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
}

li:before {
    width: 16px;
    height: 16px;
    background-color: #00A6E8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: ' '; /* for caracter bullets */
    position: absolute;
    left: 10px;
    top: 6px;
    /* for character bullets
    line-height: 60%;
    padding-left: 2px;
    color: #fff;
    */
}