Как вернуть маркеры и нумерованный список в меню?

Question

[Ateriys]

Как вернуть маркеры и нумерованный список в меню?

<style>
.cd-tabs li {
    display: none;
}
.cd-tabs li.cd-selected {
    display: block;
}
.marker li{
    display: block;
    list-style: disc;
}
</style>

<ul class="cd-tabs">
	<li class="cd-selected marker">	
		<ul>	
			<li>первый</li>	
			<li>второй</li>	
			<li>третий</li>
		</ul>		
	</li>

	<li class="marker">	
		<ul>	
			<li>первый</li>	
			<li>второй</li>	
			<li>третий</li>
		</ul>		
	</li>
</ul>

Контент списка отображается, но маркеры нет.
Нижний вариант не подходит. Нужно вывести не только маркеры, но и нумерацию списка

<style>
   .marker li:before {
          content: "\2022";
   }
</style>

Так же условие, что display: none; нельзя заменить на visibility: hidden;

Answer 1

[Александр Присяжнюк]

А ничего что вы лишкам задаёте display: block; и при этом хотите чтобы они отображались с маркером?
По стандарту лишки имеют display: list-item;. Так и ставьте его а не block.

А по поводу display: none; и visibility: hidden; - можно использовать еще вот такую конструкцию, так контент который скрыт визуально будет доступен для читалок.

.cd-tabs li:not(.cd-selected):not(.marker) {
  /*ниже паттерн visually-hidden*/
  position: absolute;
  height: 1px;
  width: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
}

.cd-tabs li.cd-selected {
  display: list-item;
}

.marker li {
  display: list-item;
  list-style: disc;
}

Comments

[Ateriys]

Истина где-то рядом! Большое спасибо за подсказку.
Ваш ответ напомнил мне про display: list-item
Может кому пригодится. Часто такое используется в табах.
Решение:

<style>
.cd-tabs li {
    display: none;
}
.cd-tabs li.cd-selected {
    display: block;
}
.marker ul li{
    display: list-item;
    list-style: disc;
}
.marker ol li{
    display: list-item;
    list-style-type: decimal;

}
</style>

<ul class="cd-tabs">
  <li class="cd-selected marker">	
    <ul>	
      <li>первый</li>	
      <li>второй</li>	
      <li>третий</li>
    </ul>	
    <ol>	
      <li>первый</li>	
      <li>второй</li>	
      <li>третий</li>
     </ol>	
  </li>

  <li class="marker">	
    <ul>	
      <li>первый</li>	
      <li>второй</li>	
      <li>третий</li>
    </ul>
    <ol>	
      <li>первый</li>	
      <li>второй</li>	
      <li>третий</li>
    </ol>		
  </li>
</ul>

Успехов!