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

5 Replies

Pat66•15mo ago

I don't understand what is going wrong here

13eck•15mo ago

Your ul a::before has a 100% width, so the pseudoelement is taking up all the space and being aligned right. If you remove that line from your CSS you'll get both elements centered on the screen:

Pat66•15mo ago

this the final result the animation work well only in the react js world

Pat66•15mo ago

https://codepen.io/alpha_66/pen/Rwqzwza

Patrick L

CodePen

Rwqzwza

...

Pat66•15mo ago

probleme solve I had some <li></li>

Gaming

Programming

Add a data-text element