Стилизация меню

[Budun]

Помогите подкорректировать меню.
Это меню для анкоров.
Нужно перед кнопкой СТАНДАРТ убрать вертикальный бордер.
Или-же реализовать бордеры между кнопками по другому.

HTML

<ul class="anchors">
	<li><a class="anchor1" href="#breed_standard" rel="nofollow">Стандарт</a></li>
	<li><a class="anchor2" href="#photos" rel="nofollow">Фотографии</a></li>
	<li><a class="anchor3" href="#video" rel="nofollow">Видео</a></li>
	<li><a class="anchor4" href="#advert" rel="nofollow">Объявления</a></li>
	<li><a class="anchor4" href="#comment" rel="nofollow">Комментарии</a></li>
</ul>

CSS

.anchors {
  background:#FFECB2;
  border-radius:20px;
  display:inline-block!important;
  list-style: none; /* убираем маркеры списка */
  margin:0 0 20px;
  min-height:36px;
  padding: 4px 11px 4px 11px;
}
.anchors a {
letter-spacing:2px;
content: "";
  border-radius:20px;
  position:relative;
  font-weight:700;
  line-height:36px;
  border-radius:5px;
  color:#445056;
  cursor:pointer;
  font-size:13px;
  line-height:36px;
  margin:0 -4px 0 0;
  padding:0 10px;
  text-decoration:none;
  text-transform:uppercase;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  transition:all 0.2s linear;
}
.anchors li a {
font-family:'PT Sans', sans-serif;
text-decoration: none;
background: #FFECB2;
font-weight: bold;
color: #ffaa00;
padding: 6px 10px 6px 10px;
}
.anchors > li > a:before {
content: '|';
color: #626262 !important;
padding-right: 19px;
}
.anchors li {display: inline;}

.anchors li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #ddd;
color: #ffffff;
border-radius:20px;
}

[Вадим Мошев]

Если уж на то пошло...
добавьте стиль:

.anchors > li:first-child > a:before {content: none;}

Кстати, в последнем стиле у вас ошибка в этой строке:

border-right: solid 1 px #cccccc;

[Budun]

Спасибо! Получается, первая кнопка идеально.
Но теперь другая проблема, при наведении фон hover, захватывает вертикальный бордер в последующих кнопках!

онлайн редактор

http://codepen.io/pen/
http://cssdeck.com/labs

[Вадим Мошев]

захватывает вертикальный бордер в последующих кнопках!

В предыдущих, может?

1. Уберите !important
2. уберите строку: border-right: solid 1px #cccccc;
3. Добавьте стиль:

.anchors li a:hover:before {color: #ddd}

http://jsfiddle.net/t232h4s7/
А вообще, я бы посоветовал полностью пересмотреть создание такого меню - Для тега <a> у вас зачем-то установлено свойство content, а также относительное позионирование...

[Budun]

Если вас не затруднит, может приведете правильный пример с before

А то если честно я в этом полный ноль.

[Вадим Мошев]

Вот, посмотрите один из вариантов реализации на этом сайте:
http://stroy.it-invest.pro/
Но это не я делал.

Правда, здесь не используются before/after, а сделано через border. Может, вам так больше понравится.

[Naive]

Сообщение от Вадим Мошев

Вот, посмотрите один из вариантов реализации на этом сайте: http://stroy.it-invest.pro/

Ты бы хоть постил достойные примеры чтоль)
Чтобы нубики смотрели, куда расти, как мыслить, какие возможности есть.
Вот хороший пример.

PS. Первый пример плох: у всех элементов, особенно родных и анимирующихс одновременно, должна быть одна перспектива. Сейчас это нравится, потому что новенький ход, а когда пипл свыкнется, им это начнет ломать мозг так же, как мне сейчас.

[Budun]

Сообщение от Naive

Ты бы хоть постил достойные примеры чтоль)
Чтобы нубики смотрели, куда расти, как мыслить, какие возможности есть.
Вот хороший пример.

PS. Первый пример плох: у всех элементов, особенно родных и анимирующихс одновременно, должна быть одна перспектива. Сейчас это нравится, потому что новенький ход, а когда пипл свыкнется, им это начнет ломать мозг так же, как мне сейчас.

Пример очень классный.
Но у меня это не работает. Так как ранее я писал что меню для анкорныых ссылок и вставляется в публикации.