Pseudo-elements and box shadows
tutorial requested by @208px
In order to achieve the hover effect on the links in my sidebar, I used two things: pseudo-elements, and inset box shadows. I’ll explain them both here.
pseudo-elements
The lines above each link are not actually borders, but instead pseudo elements, which change the style of a specific part of an element. For example, ::first-letter {...} is a pseudo element because it changes the styling for the first letter within a div. I used the ::before pseudo element to insert gray lines above each of my links, like so:
The ::before and ::after pseudo elements require content to be defined, so your CSS code must include content:””;. If you want to move them around without having them affect the spacing of other elements, giving them absolute positioning is ideal. Here’s what the code looks like:
.links a::before {content:””;position:absolute;margin-top:play with this;margin-left:play with this;width:180px;background:#ddd;height:1px;}
The hover effect where the borders on top appear to shade in from gray to black is achieved using inset box shadows. I’m no expert with these, but essentially, here’s what you do:
.links a:hover::before {box-shadow:inset 150px 0 #000;}
I hope this helps! If you have any other questions, feel free to ask.
