CODEWITHSUNDEEP
htmlcsscss-position
Vinfinity
Vinfinity

Reputation: 13

::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>

Upvotes: 1

Views: 52

Answers (2)

Lew
Lew

Reputation: 1278

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;
}

Upvotes: 2

user6678776
user6678776

Reputation: 1

The ::before content is behaving like a block. To do what you're asking, I'd absolutely position the ::before, like this:

li:before{
    content: "> ";
    color: #333;
    **top: 0px;
    left: -20px;
    position: absolute;**
}

And, relatively position the li, so that the ::before content positions relative to it, like this:

li {
    list-style: none;
    font-size: 1.3em;
    **position: relative;**
}

Upvotes: 0

Related Questions