Add a data-text element
Hi everyone
I realise an effect with data-text
my html code :
my CSS:
the result
I realise an effect with data-text
my html code :
<body>
<ul>
<a href="#" data-text="Html5">Html5</a>
<a href="#" data-text="Css">Css</a>
<a href="#" data-text="React Js">React Js</a>
<a href="#" data-text="Webgl">Webgl</a>
</ul>
</body><body>
<ul>
<a href="#" data-text="Html5">Html5</a>
<a href="#" data-text="Css">Css</a>
<a href="#" data-text="React Js">React Js</a>
<a href="#" data-text="Webgl">Webgl</a>
</ul>
</body>my CSS:
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;
font-weight: bold;
-webkit-text-stroke: 3px black;
color: transparent;
position: relative;
outline: none;
text-transform: uppercase;
}
ul a::before{
content: attr(data-text);
position: absolute;
color: gray;
width: 100%;
overflow: hidden;
}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;
font-weight: bold;
-webkit-text-stroke: 3px black;
color: transparent;
position: relative;
outline: none;
text-transform: uppercase;
}
ul a::before{
content: attr(data-text);
position: absolute;
color: gray;
width: 100%;
overflow: hidden;
}the result
