JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<h2>Цифра рядом со ссылкой в облаке тегов DLE</h2>
<div class="tagcloud">
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 29">ajax</a>, 
	<a href="#" class="clouds_small" title="Найдено публикаций: 73">css</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 20">custom</a>, 
	<a href="#" class="clouds_small" title="Найдено публикаций: 80">dle</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 28">dle 9.4</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 26">dle 9.5</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 25">dle 9.7</a>, 
	<a href="#" class="clouds_medium" title="Найдено публикаций: 89">jquery</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 36">MySQL</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 40">php</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 20">rss</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 30">topnews</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 36">баги</a>, 
	<a href="#" class="clouds_medium" title="Найдено публикаций: 111">верстка</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 32">видео</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 34">добавление новостей</a>, 
	<a href="#" class="clouds_large" title="Найдено публикаций: 149">дополнительные поля</a>, 
	<a href="#" class="clouds_medium" title="Найдено публикаций: 112">картинка</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 23">картинки</a>, 
	<a href="#" class="clouds_small" title="Найдено публикаций: 61">категории</a>, 
	<a href="#" class="clouds_small" title="Найдено публикаций: 70">комментарии</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 35">краткая новость</a>, 
	<a href="#" class="clouds_xsmall" title="Найдено публикаций: 36">модальное окно</a>, 
	<a href="#" class="clouds_small" title="Найдено публикаций:...

CSS

body {
    padding: 10px 50px;
    background: #5C4E51;
    color: #f2f2f2;
    font-family: Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
h2 {
    font-weight: normal;
    border-bottom: solid 1px #F38630;
}
a {
    text-decoration: none;
    margin-left: 10px;
}
a:hover {
    text-decoration: underline;
    color: #fff;
}
a + sup {
    color: #F4F5ED;
    font-size: 0.6em;
}
/*---Облако тегов---*/
 .clouds_xsmall {
    font-size: 1em;
    color: #69D2E7;
}
.clouds_small {
    font-size: 1.1em;
    color: #A7DBD8;
}
.clouds_medium {
    font-size: 1.2em;
    font-weight: bold;
    color: #E0E4CC;
}
.clouds_large {
    font-size: 1.5em;
    color: #F38630;
}
.clouds_xlarge {
    font-size: 1.7em;
    color: #FA6900;
}

JavaScript

// v1 после тега <a></a>X
$('.tagcloud a').each(function () {
    title = $(this).attr('title').split(': ');
    splitted = title[1];
    $(this).after('<sup> ' + splitted + '</sup>');
});
// v2 во внутрь тега <a>X</a>
/*$('.tagcloud a').each(function () {
    title = $(this).attr('title').split(': ');
    splitted = title[1];
    $(this).append('<sup> ' + splitted + '</sup>');
});*/
// v3 перед тегом X<a></a>
/*$('.tagcloud a').each(function () {
    title = $(this).attr('title').split(': ');
    splitted = title[1];
    $(this).before('<sup> ' + splitted + '</sup>');
});*/