¿Cómo truncar texto a través de CSS al principio de una oración, y no al final?

Solo quería saber si es posible hacer esto solamente con CSS. Quiero truncar un poco de texto para un cargador de archivos para que no haya desbordamiento. El texto que muestra el nombre del archivo se diseña con el siguiente CSS:

span {
margin-left: 20px;
overflow: hidden;
max-width: 50ch;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
font-style: italic;
background: var(–color-light-gray);
padding: 3px 20px;
border-radius: 8px;
}

Con este código, si carga un archivo llamado algo como: Long_file_name_blah_blah_blah.pdf, lo truncará a algo como: Long_file_name_bl…

Está bien, sin embargo, dado que es un cargador de archivos, preferiría que la extensión del archivo fuera visible después de la truncación, por lo que estoy pensando en truncarlo desde el comienzo del nombre del archivo, de esa manera, el mismo archivo anterior se vería como: …lah_blah_blah.pdf.

Sin embargo, no puedo encontrar una manera de hacerlo solo con CSS. Podría hacerlo en javascript, pero me preguntaba si había alguna forma de hacerlo solo con HTML y CSS?

¡Gracias!