#pseudo elements

hi there naps,

i think the thing you’re asking about is the ‘horizontal fading border’ to either side of the date and the reblog sections?

i’d suggest you take a look at something called ‘pseudo-elements’ - just to understand the code that you’ll be adding!  these are css additions that allow you to place extra styling in your css without adding extra content to the html.  they can also make things like positioning really easy instead of fiddling around with margins etc.

here are examples of what pseudo-elements can do

you can use the following – ::first-line::first-letter::first-child::last-child::before::after::selection

which means that you can add in extra styling on any of those pseudo-elements… for example if you’d like your first-letter to appear another colour, or the first line of your paragraph as a different style etc.

tutorials that will help;

w3schools

hongkiat

codrops

tutorialrepublic

chris coyier ( a codepen with the ‘heading line’ example i used as a basis for the date and reblog sections in my CAKE theme using ::before and ::after pseudo-elements )

for example - lines either side of a header from the chris coyier codepen;

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