Как решить проблему наследования псевдо-классов в Stylus?

Question

[Александр Серый]

Есть код на Stylus для оформление центрированного заголовка с линиями по сторонам

.line-title
	position relative
	z-index 1
	overflow hidden
	text-align center
	&:before
		right 20px
		margin 0 0 0 -100%
	&:after
		left 20px
		margin 0 -100% 0 0

.line-title:before,
.line-title:after
	content ''
	display inline-block
	width 100%
	height 1px
	background #404040
	z-index -1
	position relative
	vertical-align middle

Я хотел унаследовать все стили, включая стили псевдо-классов, одним махом так сказать. А пришлось городить вот это

.recall
	&__title
		@extend .line-title
		&:before
			@extend .line-title:before
		&:after
			@extend .line-title:after

Чувствую, должно быть рашение получше и я что-то пропустил. Что скажите?

Answer 1

[Александр Серый]

Вопрос решился тем, что когда вставил эту часть кода

content ''
	display inline-block
	width 100%
	height 1px
	background #404040
	z-index -1
	position relative
	vertical-align middle

через нестинг напрямую в .line-title и в &:before, и в &:after, то все заработало через "одиночный" @extend.

Answer 2

[Alexander Mischuk]

Попробуйте организовать ваш код по-другому.

//Extend classes
.headlings-line
  position relative
  z-index 1
  overflow hidden
  text-align center
  &:before
    right 20px
    margin 0 0 0 -100%
  &:after
    left 20px
    margin 0 -100% 0 0
//Project code
.line-title,  .recall
  @extend .headlings-line