Friday, 13 May 2016 21:16

Как сделать список ul->li в CSS русскими буквами и с продолжением в новых строках

Written by
Rate this item
(2 votes)

К примеру мы имеем такой список ul li

<ol>
    <li>Москва</li>
    <li>Вильнюс</li>
    <li>Хьюстон</li>
    <li>Буратино</li>
    <li>Гротеск</li>
</ol>

<ol>
    <li>Америка</li>
    <li>Китай</li>
    <li>Индия</li>
    <li>Таиланд</li>
    <li>Украина</li>
</ol>

 Javascript

// прописываем необходимые буквы в переменную
var letters = "абвгдежзиклмнопрстуфхцчшщэюя";
$.each($('ol'), function() {
    var item = $(this).find('li');
    item.each(function(i){
        $(this).attr("russ", letters[i] + ")");
    });
});

 Прописываем стиль

ol {
  list-style-type: none;
}
ol > li::before {
  display: inline-block;
  content: attr(russ);
  width: 1.2rem;
  margin-left: -2rem;
}

 

Read 869 times
Admin

Live and Be Free

Related items

  • Cool Zombie Outbreak
    in CSS

    Cool Zombie Outbreak

    STAY INDOORS: ZOMBIE OUTBREAK
    STAY INDOORS: ZOMBIE OUTBREAK
    <div id="marquee">
    <div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
    <div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
    </div>
    <form onsubmit="setText(event)"><label for="textsource">Source text</label> <input id="textsource" title="Text must be 5 to 30 characters in length" pattern=".{5,30}" type="text" value="STAY INDOORS: ZOMBIE OUTBREAK" /> <input type="submit" value="Use" /></form>
    
    <script type="text/javascript" xml="space">// <![CDATA[
    function setText(event){
      event.preventDefault();
      leftText.innerText = textsource.value.toUpperCase();
      rightText.innerText = textsource.value.toUpperCase();
    }
    var leftText = document.querySelector("#marquee div:first-of-type span");
    var rightText = document.querySelector("#marquee div:last-of-type span");
    var textsource = document.getElementById("textsource");
    setText();
    // ]]></script>
    #marquee {
    	margin-top: 3rem;
    	perspective: 500px;
    	font-size: 0;
    	font-family: Agency, sans-serif;
    }
    
    #marquee div {
    	display: inline-block;
    	height: 12rem;
    	width: 30rem;
    	position: relative;
    }
    
    #marquee div:first-of-type {
    	background: #e5233e;
    	transform-origin: top right;
    	transform: rotateY(-40deg);
    	color: #fff;
    }
    
    #marquee div:last-of-type {
    	background: #b31e31;
    	transform-origin: top left;
    	transform: rotateY(45deg);
    	color: #f8c9d9;
    }
    
    #marquee div {
    	font-size: 8rem;
    	overflow: hidden;
    }
    
    #marquee div span {
    	position: absolute;
    	width: 400%;
    	line-height: 1.4;
    }
    
    @keyframes leftcrawl {
    	to {
    		transform: translateX(-100rem);
    	}
    }
    
    @keyframes rightcrawl {
    	to {
    		transform: translateX(-130rem);
    	}
    }
    
    #marquee div:first-of-type span {
    	transform: translateX(60rem);
    	animation: leftcrawl 14s linear infinite;
    	text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
    }
    
    #marquee div:last-of-type span {
    	transform: translateX(30rem);
    	animation: rightcrawl 14s linear infinite;
    }
    
    #marquee form {
    	margin-top: 3rem;
    	background: #334;
    	padding: 1rem;
    	text-align: center;
    	color: #fff;
    }
    
    #marquee input[type="text"] {
    	padding: .5rem;
    	font-size: 1.2rem;
    	width: 22rem;
    }
    
    #marquee input[type="text"] {
    	padding: .5rem;
    }
    
    l#marquee label {
    	margin: 1rem;
    }
    
    @media all and (max-width: 993px) {
    	#marquee {
    		perspective: none;
    	}
    
    	#marquee div:last-of-type {
    		opacity: 0;
    		height: 0;
    	}
    
    	#marquee div:first-of-type {
    		width: 80%;
    	}
    }