<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>
<body>
<ol class="rounded-list">
   <li><a href="">List item</a></li>
   <li><a href="">List item</a></li>
   <li><a href="">List item</a>
</ol>
</body>
</html>
ol{
        counter-reset: li; 
        list-style: none; 
        *list-style: decimal; 
        font: 15px 'trebuchet MS', 'lucida sans';
        padding: 0;
        margin-bottom: 4em;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
			}

			ol ol{
				margin: 0 0 0 2em; 
			}
      .rounded-list a {
			position: relative;
			display: block;
			padding: 0.4em 0.4em 0.4em 2em;
			*padding: 0.4em;/*for ie6/7*/
			margin: 0.5em 0;
			background: #ddd;
			color: #444;
			text-decoration: none;
			
			border-radius: 0.3em;
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		.rounded-list a:hover {
			background: #eee;
		}
		.rounded-list a:hover::before {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
		.rounded-list a::before {
			
			content: counter(li);
			counter-increment: li;
			
			position: absolute;
			left: -1.3em;
			top: 50%;
			margin-top: -1.3em;
			background: #87ceeb;
			height: 2em;
			width: 2em;
			line-height: 2em;
			border: 0.3em solid #fff;
			text-align: center;
			font-weight: bold;
			border-radius: 2em;
			-webkit-transition: all 0.3s ease-out;
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
}
    $('li').mouseover(function(event) {
            var showStr = 'HELLO';
            var showDiv = $(document.createElement('div')).css({
                'position': 'absolute',
                'left': event.pageX + 20,
                'top': event.pageY + 12,
                'background-color': 'black',
                'color': 'white',
                'padding': 5
            }).attr({ 'id': 'extTip' }).html(showStr);

            $('body').append(showDiv);
            $(extDiv).show();
        }).mouseout(function() { $('#extTip').remove(); });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.