Application de la propriété text-transform

**labarre2002** · 10/08/2023, 15h39

BOnjour

je réalise l'effet suivant

Nom : 77777.jpg
Affichages : 108
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 .

**NoSmoking** · 10/08/2023, 19h59

Bonjour,

le rapport avec le codepen fourni ?

Nota : ta structure HTML n'est pas conforme.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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&#x202f;Js">react&#x202f;js</a></li>
  <li><a href="#" data-text="webgl">webgl</a></li>
</ul>

PS : toujours fâché avec les accents et les apostrophes !?!

**labarre2002** · 10/08/2023, 22h23

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

**NoSmoking** · 11/08/2023, 16h53

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à !

**labarre2002** · 11/08/2023, 20h48

Bonsoir

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

Application de la propriété text-transform

CSS

Discussions similaires

Partager

Partager