6 replies

Add a data-text element

Hi everyone
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&#x202f;Js">React&#x202f;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&#x202f;Js">React&#x202f;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

Add a data-text element

Hi everyone
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&#x202f;Js">React&#x202f;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&#x202f;Js">React&#x202f;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

Add a data-text element

Similar Threads

Add a data-text element

Similar Threads

Similar Threads

Similar Threads