Une petite aide CSS?

bonjour,

sur mes dizaines de centaines de fiches joomla (avec du HTML que je souhaite ne pas reprendre !) et de lien sous la forme suivante,

<ul>
<a href="monFichier.pdf">Libellé du pdf<span class="ref-interne">BTA3708</span></a><span class="poids-fichiers">Poids</span> : 470Ko<br><span class="fic-date">20/09/2022</span>
</ul>

je cherche sans retoucher le HTML (trop chronophage, à cadrer le span "ref-interne" uniquement, à droite.

Quelqu'un saurait il m'aider en CSS pour ca ?

Avec tous mes remerciements

Lien vers mon codepen :
https://codepen.io/seb-lh/pen/ZEMPOPp
Modifié par slhuilli (27 Mar 2023 - 18:26)

Salut,

.ref-interne{
  border: 1px solid #000;
}

Sinon

<ul>
    <a href=""></a>
</ul>

Modifié par niuxe (27 Mar 2023 - 18:37)

Oups si j'oublie le principal :

La question est comment cadrer à DROITE sans retoucher le HTML le span ref-interne ?

Désolé, je croyais que la description était claire, désolé

Bonjour

.ref-interne {position:absolute;right:0;}

Sur le codePen, ça le fait, mais dans la vraie vie, il y a surement d'autres contraintes.

Amicalement,

Je me le note et regarde demain ce que ca donne (c'est sur un intranet non connecté au net)
Merci

Je ne suis pas sûr d'avoir bien compris : il faut que le lien passe tout à fait à droite ?

ul:has(> a[href$=".pdf"]) {
  display: flex;
}
a[href$=".pdf"] {
  order: 1;
}

J'ai fait un truc un peu tordu parce que le <ul> ne comporte pas de classe, j'ai donc fait en sorte de ne cibler que les ul ayant un lien direct avec ".pdf" dedant.

Ce qui en soit est faux déjà : l’élément enfant d'un <ul> devrait toujours être un <li>.

Edit : grillé par parsimonhi, et sa solution est sans doute meilleure, car moi je cible tout le lien. En reprenant sa solution :

ul:has(> a[href$=".pdf"]) { /* ce sélecteur ne fonctionne pas encore sous Firefox */
  position: relative;
}
.ref-interne {
  position: absolute;
  right: 0;
}

Modifié par Olivier C (27 Mar 2023 - 18:54)

je peux remettre une classe éventuellement mais ca va me faire du taf...

ca marche à priori désormais comme je veux
Je ne connaissais pas la commande CSS right !

https://codepen.io/seb-lh/pen/ZEMPOPp

Merci
Modifié par slhuilli (27 Mar 2023 - 18:57)