Gradient linéaire en transparence sur un texte en CSS
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:
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> |
Code 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
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;
}
} |
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
Une idée du problème et de comment le résoudre?
Merci pour votre aide.
