CODEWITHSUNDEEP
cssimagemenuhyperlink
xDrac
xDrac

Reputation: 35

How do I make a menu link have an image next to the text?

Like so: http://html5up.net/strongly-typed/ If you look at the menu, there's these little circles next to every menu link. How exactly do I do that?

#menu a {
text-decoration: none;
font-family: "Open Sans", Helvetica, arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #EEE;
line-height: 1;
margin-right: 45px;
text-shadow: 1px 2px 0 #111;
text-align: center;

That's the code I got the menu links so far, but when I try to add these little circles it just doesn't work :/ Nothing even shows up, and if something shows up, then its 1) not a circle and 2) not next to the link.

Help :/

Upvotes: 1

Views: 596

Answers (2)

felipe_dmz
felipe_dmz

Reputation: 95

Inspecting the element with firebug or chrome's inspector you see the code:

#nav > ul > li > a:before {
    display: inline-block;
    background: #878787;
    color: #e4e4e4;
    width: 1.65em; 
    height: 1.65em;
    border-radius: 1.65em;
    line-height: 1.65em;
    text-align: center;
    box-shadow: 0.125em 0.175em 0 0 rgba(0,0,0,0.125);
    margin-right: 0.75em;
    -webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
    -moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
    -o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
    transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
}

The CSS seletor ':before' inserts a element before the object "#nav > ul > li > a"

The hacks '-moz-', '-webkit-', '-o-' and '-ms-' are to make that code cross-browser.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241198

Use a combination of background-image and the :before pseudo selector.

Here is a very simple example.

jsFiddle here

CSS

li:before {
    content: "\A";
    background: url('http://placehold.it/30x30') no-repeat 0px 0px / 30px 30px;
    padding: 8px 20px;
}

Upvotes: 1

Related Questions