How to js or css to style the first 3 characters in the text? You need to hide them or make them transparent.

<li class="cat-item cat-item-15"><a href="link">1. Анкор</a> (41) </li>
  • show sample code - L. Vadim
  • <li class = "cat-item cat-item-15"> <a href="link"> 1. Anchor </a> (41) </ li> - Jura
  • what symbols do you need to style? one. - ? Ankh -? - Arsen
  • Yes, hide "1.". HTML layout is not editable. - Jura
  • js solution fit? - Sasha Omelchenko

7 answers 7

Well, if you can use scripts now, then:
Option on jq:

 $('input').on('click', function() { $('.cat-item a').each(function() { var text = $(this).text(); text = '<span hidden>' + text.substr(0, 3) + '</span>' + text.substr(3, text.length); $(this).html(text); }) }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class='cat-item cat-item-15'><a href='javascript:void(0)'>1. hello!</a> </li> <li class='cat-item cat-item-15'><a href='javascript:void(0)'>2. this</a> </li> <li class='cat-item cat-item-15'><a href='javascript:void(0)'>3. is</a> </li> <li class='cat-item cat-item-15'><a href='javascript:void(0)'>4. a test!</a> </li> <input type='button' value='Обрезать ссылки' /> 

     $(function() { var text, textBefore, textAfter; $('ul li').each(function() { text = $(this).text(); textAfter = text.substring(3); textBefore = text.substring(0,3); $(this).empty().append('<span>' + textBefore + '</span>').append(textAfter); }); }); 
     ul span { opacity: .3; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>1. Anchor</li> <li>2. Anchor</li> <li>3. Anchor</li> </ul>

      The solution is in pure JS to hide the first three characters:

       var first = document.querySelector('.cat-item-15 a').innerHTML.substr(0,3); var second = document.querySelector('.cat-item-15 a').innerHTML.substr(3); document.querySelector('.cat-item-15 a').innerHTML = '<span class="hidden">' + first + '</span>' + second; 
       span.hidden { visibility: hidden; } 
       <ul> <li><a href="link">1. Анкор</a> (41) </li> <li><a href="link">1. Анкор</a> (41) </li> <li class="cat-item cat-item-15"><a href="link">1. Анкор</a> (41) </li> </ul>

      • Unhidden logic would also be useful to add to make it easier to manage - alexoander

      Through css you can’t count the number of letters (characters), thus you can’t give styles, through css you can only style the first element элемент::first-letter . To solve your problem, you need to cut the first 3 characters in advance (for example, via php) and paste it into a separate container for further styling.

        Perhaps so:

         .t2 { color: red; } 
         <p><span class="t1" hidden>123</span>спрятать первые 3 символа в тексте</p> <p><span class="t2" >Сти</span>лизировать первые 3 символа в тексте</p>

        • HTML layout is not editable. - Jura

        There is nothing to shove js everywhere.

         li { color: red; } span { color: black; } 
         <ol> <li><a href="#">Анкор</a> <span>(41)</span></li> <li><a href="#">Анкор</a> <span>(41)</span></li> <li><a href="#">Анкор</a> <span>(41)</span></li> <li><a href="#">Анкор</a> <span>(41)</span></li> </ol>

        • one
          There was a condition that html markup can not be changed at all. - Sasha Omelchenko
        • @SashaOmelchenko, where is it? I do not see any version of the question. - Qwertiy ♦
        • in the comments to the question. - Sasha Omelchenko
        • @SashaOmelchenko, but you had to write in the question itself ... - Qwertiy ♦

        If we are talking about lists, then only list-style-type:none .

        See additionally http://htmlbook.ru/content/svoystva-spiskov