Vinfinity Vinfinity - 4 months ago 7
CSS Question

::before adding content on top instead of before the element

I'm trying to get the ">" point to the links, but using the :before, it appears on top for some reason.
Am I doing something wrong?
Thanks in advance.



ul{
position: fixed;
left: 1em;
}
li{
list-style: none;
font-size: 1.3em;
}
li:before{
content: "> ";
color: #333;
}
li:hover:before:{
color: hotpink;
}
a{
text-decoration: none;
display: block;
color: transparent;
transition: all 0.5s ease;
}
a:hover{
transform: scale(1.1);
color: hotpink;
}

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Favourites</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Links</a></li>
</ul>




Lew Lew
Answer

It's because display for your a tags is set to block. You can change this to inline or inline-block, or remove display as inline is the default for anchors, to get the results you were looking for:

a{
    text-decoration: none;
    display: inline;
    color: transparent;
    transition: all 0.5s ease;
}

or

a{
    text-decoration: none;
    color: transparent;
    transition: all 0.5s ease;
}