• library_books today Dec 19, 2015
    • Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Be Smart with CSS Pseudo Elements

CSS Pseudo Elements

CSS holds the power to apply the styles on the HTML elements. These elements are part of the DOM tree structure. We can directly apply styles to the DOM elements but in CSS, we have various selectors to keep up consistent styling across the application. Set of the CSS pseudo element is one of the CSS selector, which is actually not a part of DOM tree. Such elements opens the doors for extra stylings.

Advertisement Placeholder
Advertisement Placeholder

Let's assume a real-time example, where we have multiple sections to show advertise for a Blog. Ads may have coming up dynamically, where we do not have flexibility to change the code.

In the image beside this paragraph is a real screenshot of this blog. The heading "Sponsors", we can add using pseudo elements.

:before


Above example is showing the use of :before. But, I am sure that you must come across a requirement, where you have to use :before and :after together.

:before and :after Together

Quoted Statement
Quoted Statement

The common example is the quoted statements or testimonials on a web page. Quoted statement is the most emphasizing text on a page, which needs extra 1 or 2 elements for proper styling. As you can see in image, the size of the double quote symbols are bigger than the text size, which needs extra tags wrapping the symbol.

<blockquote>
    <span class="first-quote"></span>
    <span class="last-quote"></span>
</blockquote>

<blockquote> tag used for a quoted statement. But this is just another tag as <div>. And hence we required extra tags as mentioned in above code snippet to add " or image for double quote symbol. Of course, we can use <span> tags without classes and go with :first-child and :last-child instead. But that is again the same thing, adding up two extra tags. So, what is the solution?

We can use :active and :before elements together for an element. Below is a demo that how can we do so.

Without Pseudo Elements
With Pseudo Elements

:selection

CSS SelectionSometime, we need to copy and paste texts from a web page. While selecting text, we can see default blue background color with white font-color as stated in image beside. Well, there is a way, we can change this default styling using :selection pseudo element.

For our blog, we have used custom CSS effect using the same way.

:selection{
    background: #ffb;
    text-shadow: 1px 0 0 #000;
}

:first-letter

Text Drop CapIf you like to read articles then you might have noticed the first letter of an article is bigger in size usually. Well, this is special styling we can do with :first-letter pseudo element. This doesn't require extra markup.

:first-line is another pseudo element that used to apply CSS to the first line but this is less popular the list.

p:first-line { 
    background-color: yellow;
}

Conclusion

There are lot many things, we can do with the use of pseudo elements. There is no boundary for the creativity. If you have better idea, please share the snippet below in comment area.

Resources