Application de la propriété text-transform

Version imprimable

1 pièce(s) jointe(s)

BOnjour

je réalise l'effet suivant

Pièce jointe 642450

mon code html:

Code:

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:

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 .

Bonjour,
:koi: le rapport avec le codepen fourni ?

Nota : ta structure HTML n'est pas conforme.
Code:

1 2 3 4 5 6 <ul> <li><a href="#" data-text="html5">html5</a></li> <li><a href="#" data-text="css">css</a></li> <li><a href="#" data-text="react Js">react js</a></li> <li><a href="#" data-text="webgl">webgl</a></li> </ul>
PS : toujours fâché avec les accents et les apostrophes !?!

10/08/2023, 22h23
labarre2002

Bonsoir

NoSmoking

il m'a été souvent reproché de ne pas fournir assez d info

le codepen c'est pour donner une idée assez precise de ce que je fais
11/08/2023, 16h53
NoSmoking

Citation:

le codepen c'est pour donner une idée assez precise de ce que je fais

oui mais il correspond en rien à ce que tu présentes comme soucis.

Mais comme tu as passé la discussion en résolue, sans aucune information sur la solution que tu as mis en oeuvre, je vais en resté là !
11/08/2023, 20h48
labarre2002

Bonsoir

j'ai juste changé la structure html en mettant les balises li.
Le probleme a été resolu