BOnjour

je réalise l'effet suivant

Nom : 77777.jpg Affichages : 133 Taille : 46,3 Ko

mon code html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
<body>
    <ul>
 
        <a href="#" data-text="html5">html5</a>
        <a href="#" data-text="css">css</a>
        <a href="#" data-text="react&#x202f;Js">react&#x202f;js</a>
        <a href="#" data-text="webgl">webgl</a>
    </ul>
</body>


mon CSS:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
   }
 
  ul  a{
   text-align: center;
   text-decoration: none;
   font-family: verdana;
   font-size: 4em;
   text-transform: capitalize;
   font-weight: bold;
   -webkit-text-stroke: 3px black;
   color: transparent;
   position: relative;
   outline: none;
}
 
 
ul  a::before{
    content: attr(data-text);
    position: absolute;
    color: gray;
    width: 50%;
    overflow: hidden;
}


codepen:
https://codepen.io/alpha_66/pen/Rwqzwza?editors=1000

a priori le text-transform ne s'applique pas sur le texte mais l'élément data-text.

Pourrais-je avoir des pistes pour que le texte de l'élément data-text s'affiche au dessus de mon texte.

merci .