Scribd
Upload
4 views

Css 456

The document contains CSS code that styles an unordered list with links. The links have text that is initially transparent but reveals on hover using CSS properties like text-stroke, drop-shadow and transitions over 1 second.

Uploaded by

manvithap gowda
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

Css 456

The document contains CSS code that styles an unordered list with links. The links have text that is initially transparent but reveals on hover using CSS properties like text-stroke, drop-shadow and transitions over 1 second.

Uploaded by

manvithap gowda
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

{

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#252839;
}
ul{
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li{
position: relative;
list-style: none;
}
ul li a{
position: relative;
font-size: 4em;
text-decoration: none;
line-height: 1em;
letter-spacing: 2px;
text-transform: uppercase;
letter-spacing: 2px;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px
rgba(255,255,255,0.5);
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}

You might also like