Как задать border-bottom для нумерованного списка?

Question

[Yaroslavv]

Друзья,как задать border-bottom для li,но что бы :before не попадал под это правило

<ol>
	<li> Посадить дерево </li>
	<li> Построить дом </li>
	<li> Вырастить сына </li>
</ol>

ol{
	counter-reset: myCounter;
}
li{
	list-style: none;
}
li:before {
	counter-increment: myCounter;
	content:counter(myCounter);
	color: white;
	background: #2980B9;
	display: inline-block;
	text-align: center;
	margin: 5px 10px;
	line-height: 40px;
	width: 40px;
	height: 40px;
}

Если обернуть текст в span,то помогает,до сокращения экрана
Заранее благодарю!

Comments

[Сергей Горячев]

Лучше покажи, что должно получиться.

[Yaroslavv]

Сергей Горячев:

Answer 1

[Cr2ed]

Попробуйте такой вариант

li{
  list-style: none;
  margin-left: 40px;
  border-bottom: ...
}
li:before {
  ...
  margin-left: -40px
}

Comments

[Yaroslavv]

Спасибо за ответ,работает!

Answer 2

[Rheinmetall]

А что если так? Сразу скажу что в верстке у меня не так много опыта, поэтому могу сморозить глупость.

Comments

[Yaroslavv]

Спасибо за ответ,работает!

[Rheinmetall]

Yaroslavv: Кстати height там не нужен, это он в процессе затесался

Answer 3

[Froggyweb]

li span {
  white-space: nowrap;
  border-bottom: 1px solid red;
}