Стилизировать первые 3 символа в тексте на css

#javascript #jquery #css #вёрстка

Как на js или css стилизировать первые 3 символа в тексте? Нужно их скрыть или сделать
прозрачными.

1. Анкор (41) 

    

Ответы

Ответ 1

Ну коли можно пользоваться скриптами теперь, то:
Вариант на jq:



$('input').on('click', function() {
  $('.cat-item a').each(function() {
    var text = $(this).text();
    text =
      '' +
      text.substr(3, text.length);
    $(this).html(text);
  })
});

1. hello!

2. this

3. is

4. a test!




Ответ 2

$(function() {
  var text,
      textBefore,
      textAfter;
  
  $('ul li').each(function() {
    text = $(this).text();
    
    textAfter = text.substring(3);
    textBefore = text.substring(0,3);
    
    $(this).empty().append('' + textBefore + '').append(textAfter);
  });
});
ul span {
  opacity: .3;
}


  
1. Anchor
  
2. Anchor
  
3. Anchor



Ответ 3

Решение на чистом JS для скрытия первых трёх символов:



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 = '' + first
+ '' + second;
span.hidden {
	visibility: hidden;
}

    
1. Анкор (41) 
    
1. Анкор (41) 
    
1. Анкор (41) 



Ответ 4

Через css вы не сможете подсчитать количество букв(символов) тем самым вы не сможете
дать стили, через css вы сможете прописать стили только первому элементу элемент::first-letter.
Для решения вашей проблемы необходимо заранее (например через php) вырезать первые
3 символа и вставить в отдельный контейнер для дальнейшего стилизирования.


Ответ 5

Возможно так:



.t2 {
  color: red;
}
спрятать первые 3 символа в тексте
Стилизировать первые 3 символа в тексте


Ответ 6

Нечего везде пихать js.



li {
  color: red;
}

span {
  color: black;
}

  
Анкор (41)
  
Анкор (41)
  
Анкор (41)
  
Анкор (41)



Ответ 7

Если речь именно о списках, то всего-навсего list-style-type:none. 

См дополнительно http://htmlbook.ru/content/svoystva-spiskov