使用jQuery调整大小来显示项目的大小

想知道是否有人能帮忙。我正在网站上使用可调整大小的jQuery。我想使用伪类将调整大小/可调整大小的对象的大小显示为通知样式的徽章，这应该在每次调整项目大小时更新。CSS不是问题，它获取大小数据并显示它，我对此有意见。有什么办法吗？任何帮助都将不胜感激。我在下面的片段中有错误，所以这里有一个有效的小提琴。

https://jsfiddle.net/adrian_babb/xwaokufj/

<ul id="icon_menu">
    <li class="draggable"></li>
</ul>
draggable.ui-resizable:after {
content: "";
position: absolute;
top: -5px;
right: -5px;
font-size: .7em;
background-color: #5f6a72;
color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
<script>        
$(document).ready(function($) {
$(".droppable").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-droppable')) {
            $(this).append($clone.addClass('inside-droppable').draggable({
                containment: '.droppable',
                scroll: false,
                tolerance: 'pointer',
                position: 'relative',
            }));
            $clone.resizable({
                aspectRatio: 'true',
                ghost: 'true',
                handles: 'ne, nw, se, sw',
                maxHeight: 200,
                maxWidth: 200,
                minHeight: 30,
                minWidth: 30
            });
        }
    }
});
$(".draggable").draggable({
    helper: 'clone',

$(document).ready(function($) {
    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-droppable')) {
                $(this).append($clone.addClass('inside-droppable').draggable({
                    containment: '.droppable',
					scroll: false,
					tolerance: 'pointer',
					position: 'relative',
                }));
                $clone.resizable({
					aspectRatio: 'true',
					ghost: 'true',
					handles: 'ne, nw, se, sw',
					maxHeight: 200,
					maxWidth: 200,
					minHeight: 30,
					minWidth: 30
                });
            }
        }
    });
    $(".draggable").draggable({
        helper: 'clone',
		revert:"invalid",
		scroll: false
    });
    });

#icon_menu {
	width: 200px;
	height: auto;
	float: right;
}
#icon_menu li {
	width: 45px;
	height: 45px;
	position: relative;
}
.draggable {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: rgba(127, 214, 236, 0.5);
}
.droppable {
	width: 200px;
	height: 100px;
    border: 1px solid #000000;
    float: left;
}
draggable.ui-resizable:after {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: .7em;
	background-color: #5f6a72;
	color: #ffffff;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="icon_menu">
  <li class="draggable"></li>
</ul>