Coloring Bullets & Numbers – CSS3


ul{
    list-style: none
  }

li{
    position: relative
  }

li::before{
    content: '';
    background: orange;
	position: absolute;
    top: 18px;
    left:0;
    width: 7px;
	height: 7px;    
    border-radius: 100%;
	-o-border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%	
  }

Example:

  • List Item 01
  • List Item 02
  • List Item 03

ol {
    list-style: none;
	counter-reset: li
}
ol li {
	counter-increment: li
}
ol li:before {
	content: counter(li);
	color: orange
}

Example:

  1. List Item 01
  2. List Item 02
  3. List Item 03

Tooltip on mouse over

Hey, Check this cool tooltip with lots of features. It’s fully customizable & easy to use.


.tooltip {
 display:none;
 position:absolute;
 border:1px solid #333;
 background-color:#161616;
 border-radius:5px;
 padding:10px;
 color:#fff;
 font-size:12px;
}


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('

') .text(title) .appendTo('body') .fadeIn('slow'); }, function() { // Hover out code $(this).attr('title', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.tooltip') .css({ top: mousey, left: mousex }) }); }); </script>

Example:

Tooltip on the link

Tooltip on the title