Задать вопрос
@Ateriys
html

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

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

<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;
  • Вопрос задан
  • 1227 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
RedEagle69
@RedEagle69
Html-верстальщик, Front-end разработчик
А ничего что вы лишкам задаёте 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;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Довести разработку flutter приложения до логичного конца
23 апр. 2024, в 09:24
15000 руб./за проект
SMM для HR
23 апр. 2024, в 08:58
15000 руб./за проект
[python] протестировать function calling у gpt-4 и у claude 3 opus
23 апр. 2024, в 08:50
200 руб./за проект
Ещё заказы