:::: MENU ::::

Learn And Use Magical :before and :after Pseudo-Elements In CSS

Learn_And_Use_Magical_before_and_after_Pseudo-Elements_In_CSS_Banner

Now a days it is very common to see the use of :before and :after pseudo-elements in blogs, application websites and it is very obvious that these stuffs are very much famous and effective in front end web development. One of the article which I found is really informative and shows how we can play around with this cool feature of CSS2.   This particular technique has unlocked the new way of adding icons to web pages with no icons at all and was actually developed by Nicolas Gallagher.

84 simple GUI icons using CSS

Nicolas Gallagher used pseudo-elements to create 84 GUI icons.

There are other pseudo elements which are pretty useful but today we’ll be focusing only upon those two famous pseudo brothers.

What Exactly It Does?

The name itself tells what the element does in real, it inserts a fake element before or after the targeted element. Actually its so fake that you can not find it in the DOM with the help of Firebug or Chrome Developer Tool. But you can do wonders with these two pseudo elements.

Some Of My Work Around

 

Learn_And_Use_Magical_before_and_after_Pseudo-Elements_In_CSS_2

Check the detailed example in Codepen.

What I tried to do was with the help of those pseudo brothers I managed to come up with two different CSS drawing. These kinds of experiments you can do with :before and :after pseudo elements though it is not necessary to dive into these complex CSS drawing but today we will be covering rather simple task which we generally use while making vertical navigation menu.

Know The Basics

The :before and :after pseudo-elements are very handy and do not require any vendor prefixes. The simple example would be:

Here two things we have to keep in our head. First, for each element we will be getting one :before and one :after pseudo-element. In our above example we are targeting the .myTest element and inserting pseudo brothers before and after itself.

Secondly, we must have to use content property which is a part of CSS3 Generated and Replaced Content Module in W3C specification. Actually, to target the element itself we need the pseudo-element selector and above all if we do not use the content property, everything becomes useless.

Here in the example the .myTest element will be having a period/dot before and a hash symbol after its content.

Here Is The Dinner

 

Learn_And_Use_Magical_before_and_after_Pseudo-Elements_In_CSS_3

Check the detailed example in Codepen.

What we are trying to achieve is getting that small arrow at the right side of each menu element via our pseudo-elements. Our web designer may feel some relief and have a cup of coffee during we create this small arrow by some cool CSS tricks and having our pseudo brothers beside us.

For this to happen we need,

Markup

1. Tea-spoon of, Sorry jokes apart, we need one parent Unordered list i.e <ul> tag.
2. List items i.e <li> tags as child element of <ul> tag.
3. Anchor i.e <a> tag as child element of each <li> tag.

That’s it. We got the basic structure done.

CSS

Now the rest that will make this structure look like kind of similar to above picture is CSS3 tweaks.

The above HTML block is pretty simple to figure out. We will focus on the CSS part here. Below the steps that I discovered:

1. To make that unordered list i.e <ul> tag without having any particular style, we need to set style property list-style to none. That will override the list-style property value bullet to none.

2. After stylizing the list items i.e <li> tags whatever we feel like, we need to check the inner anchor elements i.e <a> tags to make it behave properly. Anchor tags are by-default inline element, that’s why we can’t set or specify size of them. To make that we need to set its display property to inline-block and then can specify the width property.

3. This is the final lap so we need to push ourselves harder to beat the rest. We’ll be placing the arrow after the <a> tag for the sake of our example. The logic here to show the arrow only when the user hovers over the menu item. To understand better you can recall those CSS selector techniques for a moment. Here we’ll be using only the :after pseudo-element to get that effect done. To get one individual content just after the targeted element we need to set it’s(i.e the :after content of the targeted element) position property as absolute.

We do not need any size of it so we will go for a size 0 :after element. Why is so?
Because that arrow is going to be generated by its border property.

So now we know the trick, we will set the border-left property value as 5px solid #000000 and rest of the borders to 5px solid transparent so that we can achieve the nice sharp edge at the corners of the arrow. Now the question is that how we are getting the border pointing to right and finishing at a certain point. That’s because we are having a size 0 :after element. The last but not the least, we can now set the left property to place it in a proper position so it can be popped up nicely.

That’s all we have to do to get our menu.

Browser That Supports

From any front-end-technology perspective, browser support is a big time concern. But for this case, it’s not like much of a harm.

And now the :before and :after pseudo-elements award goes to :

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs) and
  • Pretty much all mobile browsers.

We have great issues with below IE7. So if our customers are very fond of these stone-age browsers, we should swiftly bypass those pseudo guys.

Conclusion

We should always remember the idea that says : “DON’T use these pseudo-elements for generating useful content“. Because doing so will get us huge maintaining issues. If there are plenty of pseudo-elements having all important data will definitely harm us because there will not be an actual element in the HTML document. We can only get the style of it via Firebug or Chrome Developer Tool. Nevertheless, you can put pseudo-elements in your backpack and use them any way that you wish. I hope that you found this tutorial useful! If you have any suggestions, bring them to the comment section below.

Thanks.

Indrajit Das
Follow me

Indrajit Das

Co-founder of CodeStrive [ Kind of a seeker for new dimensions in WEB world, sort of a Thinker, Blogger, Die-Hard Coder, Wash-Room Singer, Football Player, Gamer, Guitar Player, Cartoonist and the list goes on.. ]
Indrajit Das
Follow me

Latest posts by Indrajit Das (see all)

Json To Treeview With Jquery
Pride that quarells at self-breath