Как уменьшать линию в зависимости от длины текста?

Denis,

<div class="line"><span>ТЕКСТ КАКОЙ-ТО</span></div>

.line {
  display: flex;
  align-items: center;
}

.line span {
  flex-shrink: 0;
}

.line::after {
  content: '';
  width: 100%;
  height: 2px;
  margin-left: 5px;
  background-color: red;
}

Как уменьшать линию в зависимости от длины текста?

L1nw0od, line width:100%

Как уменьшать линию в зависимости от длины текста?

L1nw0od,
Да нечего там показывать.

<div style="display:flex">
  <span style="flex-shrink: 0">
  <div class="line">

Как уменьшать линию в зависимости от длины текста?

А если текста настолько много, что переходит в 2 строки, что должно быть? Это Вам на подумать.

А так, display:flex, чем больше 1 элемент. тем меньше второй.

Как вернуть подсказки при автозаполнении в vscode?

sonorasatra, для фрэймворк специфичных подсказок, как правило, нужно ставить соответствующее расширение. Например, для Vue - это Vetur.
Для свелте, полагаю, это расширение - https://marketplace.visualstudio.com/items?itemNam...
Установлено?

Как вернуть подсказки при автозаполнении в vscode?

Ну вообще у ВС Кода действительно есть с этим проблемы.
ctrl+пробел пробовали? Это открывает попап с подсказками.

P.s. нарушаете правило о тэгах вопроса.
К CSS HTML отношения не имеет.

Как решить проблему с CLS?

Судя по всему ему не вертикальный шифт не нравится, а горизонтальный. По обновляйте свою страницы быстро несколько раз. Сначала один элемент первый, а потом другой.

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

Отступ между полем ввода и кнопкой?

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

Отступ между полем ввода и кнопкой?

И что, не гуглится ничего по запросу "отступ между элементами HTML"?

Как открыть ссылку в новой вкладке по клику на колесико vue-router vue2?

Ну так как код Вы не предоставляете, то ответ будет в стиле кэпа:
Нужно делать ссылки ссылками(то есть через<a>) и всё будет нормально.

Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

darkhipov2018, Изучить основы языка, перед тем как что-то делать. Загуглите. Существует ли в DOM такой метод - getElementByClassName? Спойлер - не существует. Пропущена буква.

И как тогда лучше обратиться, чтобы работали все кнопки, а не только первая?

Я выше уже написал как.

Вы либо троль, либо идите штудируйте https://learn.javascript.ru/
Статья по теме: https://learn.javascript.ru/searching-elements-dom

Как сделать размытие части фона на css?

svg или заставьте бокс быть такой же формы как Ваш треугольник. Например через mask или clip-path

Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

darkhipov2018, Что значит как?
Заменить селекторы по id на селекторы по классу. Лучше с помощью document.querySelectorAll('.classname')
И потом добавить элементам обработчики, перебрав их в цикле. В идеале освоить делигирование.
Так же исправить разметку чтобы были не id а классы.

Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

А открыть консоль и почитать ошибки это сложно слишком?

Каким способом можно кликнуть по элементу смещённым по оси Z?

Пример бы не помешал с демонстрацией проблемы

Ошибка: "Cannot read properties of null (reading 'addEventListener')"?

12Vadim12,

Но это значит что почти каждый кусок кода должен будет проходить проверку

Ну как бы надёжный код так и пишется.
У Вас, в целом, 3 сценария.
1) Быть уверенным в среде выполнения кода. Тогда можно без проверок. (Но рано или поздно всё же где-то да выстрелит и чем больше прошло времени, тем больше вероятность, так как ничто не статично вечно.)
2) Весь код должен обкладываться проверками и иметь обработчики поведения в случае ошибок, в том числе уведомлять пользователя при необходимости.
3) Писать как попало и будь что будет. (осуждаю)

У меня консоль выбивает ошибку, если я к каждой странице буду вешать другой js файл. Не знаете ли вы, что изменить в gulpfile для изменения этого, или более удачной сборки?

Тут нужно больше информации. Что конкретно Вы делаете, какой у Вас конфиг gulp и тд.
Я бы на это дело лучше отдельный вопрос задал, где будет вся необходимая информация и объяснение в чём разница между текущим решением и желаемым результатом.

Ошибка: "Cannot read properties of null (reading 'addEventListener')"?

12Vadim12, Ну значит стоит делать проверку после querySelector*, или как Вы там у себя элементы в DOM ищите.

Ошибка: "Cannot read properties of null (reading 'addEventListener')"?

Ну а зачем Вы подключаете код для первой странице ко второй?
А самый простой путь - сделать проверку, найден ли был элемент. И если найден, только тогда делать addEventListener.

Как сделать что бы картинка сдвигала соседние боковые элементы?

Kostylev2021, классно, но в голове не компилируется.
Если хотите помощи, то делайте демку со своим кодом, а так же наглядную разницу между текущим результатом и ожидаемым и добавляйте эту информацию в вопрос.

Как сделать что бы картинка сдвигала соседние боковые элементы?

Kostylev2021, И что тогда должно происходить с соседом справа, когда картинка стоит в предпоследней колонке и следующий элемент уже некуда сдвигать?