CODEWITHSUNDEEP
htmlcss
bashleigh
bashleigh

Reputation: 9314

After CSS inline content

I've built a list navigation and wanted to add a '*' between each list item implementing the CSS rather than the HTML. What I've currently built is:

<ol>
    <li>
        <a href=''>List item 1</a>
    </li>
    <li>
        <a href=''>List item 2</a>
    </li>
</ol>

Obviously this builds

  1. List item 1
  2. List item 2

In CSS I've written:

ol{
   list-style-type:none;
   margin:0px;
   padding:0px;
}
ol>li{
   float:left;
}
ol>li>a{
   display:block;
   padding:2px 7px;
}

This builds:

List item 1 List item 2

JSFiddle of what currently happens: http://jsfiddle.net/v7eG7/

My question is how can I add the '*' symbol to the content of the document using after but keeping the list items and the afters in line with each other?

List item 1 * List item 2

Upvotes: 0

Views: 105

Answers (2)

Razvan B.
Razvan B.

Reputation: 6771

You will have to add:

ol > li:after {
    content: "*";   
    vertical-align:middle;
}

And change:

ol > li > a {
    display:block;
}

To:

ol > li > a {
    display:inline;
}

Here is a demo fiddle

And if you would like the last element without the *, you will have to add:

ol > li:last-child:after {
    content: none;
}

Demo fiddle

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Assuming you tried ol>li:after {content:'*';} or similar, the problem is that you set display:block on your a elements, which will force that * onto a line below it.

Consider changing the a's display:block to display:inline-block instead.

Upvotes: 2

Related Questions