Как нарисовать прямую линию между двумя элементами списка ul так, чтобы она была на одном уровне с обоими элементами?

Чтобы нарисовать прямую линию между двумя элементами списка ul на одном уровне, можно использовать CSS свойство `position: relative;` и `::before`. 

HTML-код:
```
<ul>
  <li>Обсуждение</li>
  <li>Читать</li>
</ul>
```

CSS-код:
```css
ul li {
  position: relative;
  display: inline-block;
  padding: 10px;
  margin: 0 10px;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: black;
}
```

Таким образом, прямая линия будет нарисована между элементами "Обсуждение" и "Читать" на одном уровне, находясь внутри каждого элемента списка ul.

Вариантов несколько. Вот один из них: