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

Modern CSS: The Exciting Future of Web Style

Just a few years ago, people in the technology industry might have said that cascading style sheets (CSS) were a minor factor in web design. You needed to know a little bit about how to use CSS, but there was no need to be an expert on the topic. Your time, they would have told you, was better spent learning JavaScript and its myriad libraries like jQuery. Today, CSS is a more important web…