CODEWITHSUNDEEP
csscss-selectors
madjoe
madjoe

Reputation: 195

Could I use both CSS pseudo-elements on a selector: before and after for this example?

I would like to create a horizontal menu navigation that would look like this:

{image1} ITEM1 [separator1] {image2} ITEM2 [separator2] etc.

I have a limitation: the HTML should be intact, unchanged. Is this possible only with CSS with the following markup: http://jsfiddle.net/Mrt4V/

For now, I tried many variations, ended up with the :before and :after pseudo-elements, but now the menu shows up like this:

{image1} [separator1] ITEM1 {image2} [separator2] ITEM2 etc.

I think this could be a bottleneck:

li a:after {
  content: '';
  float: left;
  zoom: 1;
  margin: 0 0 0 2px;
  width: 4px;
  height: 16px;
  background: url('http://static-caselogic-com.r.worldssl.net/images/CaseLogic/Misc/CategoryMenuSeparator.png') 0 0 no-repeat;
}

What am I doing wrong?

Upvotes: 1

Views: 577

Answers (2)

Masoom
Masoom

Reputation: 731

For this scenario, positioning is the key part.

Added position:relative to <a> tag and position:absolute to the :before & : after.

The reason is to place :before & :after relative to the <a> tag.

I brushed up the changes in CSS to get the described result.

Below is the working fiddle:

http://jsfiddle.net/MasoomS/gwxndwka/

Upvotes: 1

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

just set the :after display:inline-block and remove float:left

here is the example http://jsfiddle.net/Mrt4V/1/

Upvotes: 0

Related Questions