Почему контент элемента after оказывается по элементом?

Question

[Владимир]

Вот пример. Линии, которые идут от цента влево должны начинаться из центра квадратных точек, но почемуто содержимое "content" уползает вниз. Почему ?
https://jsfiddle.net/zdn1Lm6t/

Answer 1

[Сергей Андреев]

тут конкретно проблема с высотой строки, так как это строчный элемент он всегда имеет какойто line-height, можно его задать равный высоте.

.side-menu ul li:after {
  content: '\25A0';
  border: 0;
  width: 92px;
  height: 1px;
  line-height: 1px;
  vertical-align: top;
  text-indent: -2px;
  background-color: #000;
  -webkit-transform: translate(100%, -10px);
          transform: translate(100%, -10px);
  display: block;
}

но все равно это плохое решение, нельзя опираться на поведение таких элементов, лучше через before сделать квадрат.
вот быстрый пример

Answer 2

[iBird Rose]

не сможешь ты нормально 2 элемента в один after засунуть. делай отдельно. и ровняй через absolute
https://jsfiddle.net/zdn1Lm6t/1/