Главная > CSS > ol, ul — цвет нумерации

ol, ul — цвет нумерации

7 декабря 2015 Написать комментарий К комментариям 
article ul,article ol{
	list-style-type:none;
	counter-reset:num;
	margin:0 0 20px 0;
}
article ul li,article ol li{
	list-style-type:none;
	padding-left:20px;
	margin-bottom:4px;
}
article ul li:before,article ol li:before{
	color:#ffffff;
	background:#ff9300;
	border-radius:50%;
	padding:0 5px;
	text-align:center;
}
article ul li:before{
	content:"•";
}
article ol li:before{
	content:counter(num);
	counter-increment:num;
}

LESS:

.article{
	ul,ol{
		list-style-type:none;
		counter-reset:num;
		margin:0 0 20px 0;
		li{
			list-style-type:none;
			padding-left:20px;
			margin-bottom:4px;
			position:relative;
			&:before{
				position:absolute;
				top:0;
				left:0;
				color:@color_link;
				font-weight:600;
			}
		}
	}
	ul li:before{
		content:"•";
	}
	ol li:before{
		content:counter(num) ". ";
		counter-increment:num;
	}
}

Для того чтобы учитывался атрибут start у ol:

$('article ol').each(function(){
	var start=parseInt($(this).attr('start'));
	if(start>0){
		$(this).css('counter-reset','num '+(start-1));
	}
});
Categories: CSS Tags:
  1. Пока что нет комментариев.
Похожие публикации