Bonjour,
Je cherche une solution pour faire en sorte que le texte de ma balise li active (sur une ligne) disparaissent linéairement sur la fin du texte.
Code HTML:
Code CSS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <ol class="myClass"> <li><a href="/">HOME</a></li> <li class="active">Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius </li> </ol>
Avec ce code, j'ai vérifié mon "&.active:after" me montre bien les derniers mots de la ligne, mais alors que le gradient linéaire marche si je le mets sur le li.active il ne marche pas quand je le mets sur le li.active:after
Code : 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
36
37
38
39
40
41 ol { margin-left: 10px; } li { float: left; margin-top: 20px; list-style: none; color: $color6; &.active { position: relative; float: right; margin-right: 100px; width: 970px; color: $color5; display: inline-block; white-space: nowrap; overflow: hidden; //background: -webkit-linear-gradient(right, $color3, $color5); //-webkit-background-clip: text; //-webkit-text-fill-color: transparent; } &.active:after { content:""; position: absolute; left: 700px; height: 70px; width: 100%; //background: -webkit-linear-gradient(right, $color3, $color5); //-webkit-background-clip: text; //-webkit-text-fill-color: transparent; } }
Une idée du problème et de comment le résoudre?
Merci pour votre aide.
Partager