0

I have an li-tag in my menu:

nav ul li ul.firstmenu li.secondtothree{
float: none;
border-bottom: 1px solid #DCDCDA;
padding:3px;
text-transform:none;
}

Then I want to add ">" after the menupoints, so that it looks like "Home >" or "Article >".

This is my :after:

nav ul li ul.firstmenu li.secondtothree:after{
    content: ">";
    font-size: 15px;
    text-align: right;
    display: inline-block;
    width:100%;
    right:0px;
}

But the ">" is always in the next row. Is it possible to set it directly in the line after the menupoint?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Zwen2012
  • 3,360
  • 9
  • 40
  • 67
  • 1
    looks like it's because of `width:100%`, you should set `margin` to put some space between the main text and the `:after`'s content. – King King Jun 01 '14 at 16:39
  • Set the margin=0 has no effect unfortunately – Zwen2012 Jun 01 '14 at 16:42
  • normally you don't need `width:100%`, and then you may need `margin` to put some space between the main text and the content, otherwise they will be close to each other, hence bad looking. I did not mean you had to use `margin` to solve your problem, it's just needed to make it better looking. – King King Jun 01 '14 at 16:44

1 Answers1

1

Generated content is already placed inline by default. You don't need any of these properties:

text-align: right;
display: inline-block;
width:100%;
right:0px;
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • And do you have a hint what I can do to have the "content" where it should be? – Zwen2012 Jun 01 '14 at 16:43
  • @Zwen2012: What do you mean "where it should be"? Since you're using `:after` the content should be placed directly after the text - that's exactly where it should be (once you remove all the unnecessary properties anyway). – BoltClock Jun 01 '14 at 16:44
  • 1
    it is in the next line! Like this-> "Home
    >" but it should be "Home >"     – Zwen2012 Jun 01 '14 at 17:27