Обрезаем длинный текст с красивым эффектом затухания

Этот пример текста мы будем обрезать с эффектом затухания

1. Html разметка

<h1>Этот пример текста мы будем обрезать с эффектом затухания</h1>

2. CSS разметка

h1{
    position: relative;
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
h1::after{
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 80%;
    background-image: linear-gradient(to right, transparent, #222);
}