Николай Угольников

img {
  filter: invert(1);
}

И почему, если псевдоэлемент по умолчанию inline, возможно проставить размеры height и width ?

А с чего должно быть невозможно? inline можно задавать размеры.

align-items: center; /*Свойство выравнивает псевдоэлемент внутри flex-контейнера "container_1" по высоте */

Если задать flex-direction: column, то будет уже выравнивать по ширине. Так что, выравнивает по центру поперечной оси

input::-webkit-calendar-picker-indicator{
    display: none;
}

Не вижу на странице ни одного элемента, который нужно абсолютно позиционировать. Используй display: flex и display: grid

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

HTML:

<section class="block">
    <div class="container block__container">

    </div>
</section>

CSS:

.block {
    position: relative;
}

.block__container::after {
    content: "";
    position: absolute;
    width: 50%;
    height: ;
    right: 0;
    top: 0;
    background: url (...) no-repeat;
    background-size: cover;
}

Почему нельзя через CSS?

<div id="menu">
    <nav class="nav-menu">
       <a href="/" class="menu-item__link menu-item__link--current">
         <svg></svg>
         <div class="item-link__text">Главная</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Книги</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Фильмы</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Истории</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Профиль</div>
       </a>
    </nav>
</div>

.menu-item__link--current {
    position: relative;
}

.menu-item__link--current::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    filter: blur(px);
}
}

input {
    appearance: none;
}

Не совсем понял суть вопроса. Попробуйте задать высоту в %

.contacts::after {
    content: "";
    background: url() no-repeat;
    height: 100%;
    right: 0;
    ...
}

<svg ...>
    <image x="0" y="0" width="" height="" xlink:href="/img/" />
</svg>