CSS Pseudo selectors: before,: after,: focus and: first-child

Tommy

Moderator
Staff Member
Joined
Sep 28, 2012
Messages
189
Points
28
In the series on CSS selectors, I'm going to talk today about some special selectors. At first two selectors for additional text to generate,: before and: after. In addition, the pseudo selector: first-child and: focus.

: Before

The pseudo-element can something with no other selector can, namely the pre-come of content in an element.

An example. Suppose you have a list of links, but some links are more valuable. If it were a power tip.

These links can precede it with the text "Hot tip". This can of course do this in your HTML code by adding text, but with the: before selector can make life easier.

This may sometimes be useful if you customize the design of your site without the HTML code to come. Easy external adjustments do you do with your CSS.

Easily add

A: before selector is easy to insert. First, create a class that we called 'tip' give (. Tip so). Add this class to the paragraph or link that gets the extra addition. For instance
View Raw Code?

HTML:
<a href="link.htm" class="tip"> Link Text </ a>
To your CSS style sheet, add the following code:

HTML:
a.tip: before {content: "Super Tip!" }
Try it in browser to see your result ! :D
 
Older Threads
Replies
2
Views
2,970
Replies
0
Views
2,061
Replies
4
Views
5,276
Replies
0
Views
1,969
Newer Threads
Replies
2
Views
4,107
Replies
5
Views
5,233
Replies
11
Views
5,967
Replies
0
Views
2,561
Recommended Threads
Replies
1
Views
2,456
Replies
8
Views
6,024
Replies
1
Views
2,715
Replies
13
Views
6,288

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top