Menu inline through (riscado) com transform

[Jamal xtz 0]

Ola amigos, ainda sou iniciante em programção web e estou tendo dificuldades em fazer um menu que fique com o efeito riscado quando passar o mouse, na verdade ate consegui mas gostaria que ficasse com aquele efeito de deslizar lentamente, segue o exemplo. http://traivan98.xyz/atom-preview/slider-style/single-slider.html , desde ja grato.

[L. Henrique 179]

Essa risca é chamada de pseudo-elemento. Esses mesmos são chamados da seguinte forma ::after ou ::before e eles servem pra adicionar um elemento dentro dele mesmo. Ex.:

.sua-classe {
   width: 100%;
   height: 100px;
   background: blue;
}
   .sua-classe::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 50px;
      background: green;
   }

Esse código acima vai resultar no background abaixo:

 

Esse mesmo efeito você pode fazer com o menu, no caso, criar o seu menu estruturando a ul com suas li's e adicionando um pseudo elemento com largura 0% (que será modificada pra 100% no hover) e altura de 1px.

Preparei uma DEMO pra você, veja se é isso que busca.

Obs.: Eu sei que no máximo você vai entrar na demo, copiar o código, mudar alguns detalhes no CSS e acabou (maioria das pessoas fazem isso). Eu ficaria muito grato se você entendesse o que está ocorrendo no código (já que você é iniciante, isso é de suma importância - mas, caso não queira aprender, ai aconselho a escolher outra área de atuação).

[Jamal xtz 0]

L. Henrique muito obrigado , era exatamente o que eu estava procurando, na verdade eu estou tentando entender msm todos os códigos que estou usando, fiz um site assim todo no control c, mas quando preciso alterar algum item tenho dificuldade, então resolvi fazer tudo do zero pra entender os comandos, muito obrigado cara ajudou muitíssimo.