#pseudo elements

[sekhondandc]

Background Wave | Pseudo Element | HTML CSS | Sekhon Design & Code

[sekhondandc]

Background Skew | Pseudo Element | HTML CSS | Sekhon Design & Code

[jkresearch]

Uncommon Use Cases For Pseudo Elements - Ahmad Shadeed

[insidehtml5]

Valid CSS Content | CSS-Tricks

There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. Here's

[dohoons]

Solved with CSS! Logical Styling Based on the Number of Given Elements | CSS-Tricks

Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.

[octomoosey]

Hey G! SO I love your new theme CAKE and I was wondering if you could do a a little tutorial on how you designed the REBLOG/VIA/SOURCE section I really like the little lines in it and in general want to figure out how to out them in other parts of themes (asks or pop ups. haven't really decided but I just love them!) - NAPS

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;

hope this helps! :3

[ciralism]

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. 

[afewthingsivelearnt]

Using HTML entities in CSS pseudo elements

If you want to use HTML entities in the CSS pseudo element's `content` property, use escaped unicode: /* this puts a middle dot between spans */ span:not(.last-child):after { content: '\00b7'; }