Alex-Broudy

Потому что с чистыми inline-элементами (:before и :after являются оными изначально) не работает свойство transform. Поменяйте, к примеру, на inline-block, как я в примере, и все будет работать:

Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

Вот так надо:


Вот эти 3 атрибута для тега video:
playsinline muted autoplay

Смените сложность вопроса на «лёгкую», это базовые свойства CSS.

Если нужно фиксировать на экране, то position: fixed + viewport-единицы (можно тупо в процентах в данном случае, ибо позиционируем относительно окна):


Если без фиксации при прокрутке и внутри любого блока, то тут уже обязательно viewport-единицы, чтобы не зависеть от обёртки и брать размеры прямо у окна браузера:


Учтите, что viewport-единицы в мобильных браузерах (Chrome Android и iOS Safari) со схлопываемыми (косое слово, да) панелями учитывают размер окна без учёта этих панелей в раскрытом состоянии, поэтому они могут перекрывать этот блок, пока не будут скрыты/сжаты.

P. S. Да, это не плагин, но для этой цели лучше сделать так, ибо зачем ставить плагин и в целом нагружать этим back-end.

$('.items').click(function(){
    $(this).find('.item').css('display', 'none'); 
});

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

Когда вы применили :hover к нужному элементу, это не значит, что именно у него будут показаны стили дочерних элементов. На примере div:hover a — после выбора состояния :hover для родителя нужно выбрать именно a, потому что стили применяются именно к нему, несмотря на то, что они идут от :hover родителя (что, чёрт, логично).

Дополню, что можно ещё использовать вот такой хак, если нужно не менять габариты (padding и другие манипуляции их увеличивают), но при этом увеличить зону действия элемента:



Да, я сам дошёл до такого полезного и смешного костыля. Удобно использовать с мелкими единичными кнопками, у которых нужно сохранить небольшие габариты, но увеличить зону действия. Ну и т. п.

Если примитивно на jQuery, то вот:

$(document).on('click', "ul li", function() {

  let elementID = $(this).attr("data-nav");

  $('html, body').animate({
    scrollTop: $("#" + elementID + "").offset().top
  }, 700);

});

Можно так, например, только высота ячеек должна быть одинаковой, если хочется, чтобы кол-во элементов в последней строке было не максимально возможным, от кол-ва столбцов такой способ не зависит:




Если кол-вол элементов всегда будет максимальное в последней строке (полное её заполнение), то хак на :before не нужен, а строки могут быть разной высоты:

Только недавно сталкивался с этой же проблемой, решил переписав css свойства скролла для webkit:

.scroll_block::-webkit-scrollbar-thumb {
    border: 2px solid white;
    background-color: #ccc;
}
.scroll_block::-webkit-scrollbar {
    -webkit-appearance: none;
}

.scroll_block::-webkit-scrollbar:horizontal {
    height: 13px;
}

.scroll_block::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 2px solid white; 
    background-color: rgba(0, 0, 0, .5);
}

p.s. цвет и т.п. сами устанавливайте

для body overflow: hidden; а для меню overflow: auto;

<script>
function showTooltip()
   {
           var myDiv = document.getElementById('tooltip');
           var myLink = document.getElementById('link');
  if(myDiv.style.display == 'none')
        {
           myDiv.style.display = 'block';
           myLink.style.display = 'none';
} 

else {
           myDiv.style.display = 'none';
}
return false;
}</script>
<a href='javascript:;' onclick=showTooltip() id="link"> +38xxx-xxx-xx-xx </a>
<div id=tooltip style='display: none'><?php echo $agent_mobile; ?></div>

Вот решение. Может кому пригодится.

На avito.ru в виде изображения выводится номер, а на другом сайте через ajax, что есть хороший вариант.
При нажатии отправляете ajax запрос, на сервере обрабатываете и выводите номер, а далее просто вставляете в нужный блок полученные данные.

$('#show_number').click(function(){
  $.post('/get_number.php', {item_id : ITEM_ID}, function(res){
    //тут можете всякие условия написать, то ли мы получили..
    $('#phone_block').text(res);
    $('#show_number').hide(); //его также можно убрать сразу при нажатии, чтоб дважды не нажимали или дисаблить после нажатия или или или
  });
});

^^^
как-то так

pointer-events: none;