Как убрать точки в li css: Как убрать маркеры в маркированном списке?

Leave a Comment / Css / By /

Псевдоэлемент after и псевдокласс last-child

Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.

Дизайнеры очень любят разделять пункты меню разными символами, ставя в тупик неопытных верстальщиков. Начинающий верстальщик, наверняка попался бы на удочку и вслед за текстом, понатыкал бы разделители.

<li>
<a href="#">Home</a>
    <span>|</span>
</li>

В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.

Такой нехитрый способ конечно же работает, но он сильно засоряет код, а практической пользы для семантики от кучи span-ов, никакой нет.

Правильный способ

В HTML коде не нужно вообще, как-то проставлять вертикальные линии. Теперь, мы считаем их псевдоэлементами, а все дальнейшие действия происходить будут в

CSS стилях.

<nav>
  <ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
  <li>
    <a href="#">Handbags</a>
  </li>
  <li>
    <a href="#">Wallets</a>
  </li>
  <li>
    <a href="#">Accessories</a>
  </li>
  <li>
    <a href="#">Mens Store</a>
  </li>
  <li>
    <a href="#">Shoes</a>
  </li>
  <li>
    <a href="#">Vintage</a>
  </li>
  <li>
    <a href="#">Services</a>
  </li>
  <li>
    <a href="#">Contact Us</a>
  </li>
  </ul>
</nav>

Псевдоэлемент after в CSS стилях

Мы видим определенную закономерность, что за каждым пунктом меню, стоит разделитель, значит применяться псевдоэлемент after будет к тегу li.

nav ul li::after {
}

Символ вертикальная линия имеет следующий код — «\007C». Откуда мы узнали? Из таблицы символов Юникода.

Не забудьте убрать дефолтные стили маркеров, круглые точки!

nav ul {
    list-style: none;
}

Запишем номер в Юникоде в свойство content.

nav ul li::after {
  content: "\007C"; /* юникод вертикальная линия */
  color: #fff; /* поменять цвет */
  font-weight: bold; /* поменять жирность */
  position: relative;
  padding-left: 4px; /* выравнивание относительно текста по гориз. */
  top: -2px; /* выравнивание относительно текста по верт. */
}

Вертикальные линии встали, как мы и хотели, за исключением последнего. Дело в том, что на макете нет последнего разделителя и на этот случай, то же есть элегантный псевдо-выход.


Псевдокласс last-child

Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.

nav ul li:last-child::after {
    content: "";
}

Заключение

Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.

Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.

В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.

  • Создано 18. 01.2019 10:35:15
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Тип стиля списка — Tailwind CSS

​Основы использования

​Установка типа стиля списка

Для создания маркированных или числовых списков используйте утилиты list-disc и list-decimal.

list-disc

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посидеть здесь
  • Я расскажу вам, как я стал принцем города под названием Бель-Эйр

list-decimal

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посидеть здесь
  • Я расскажу вам, как я стал принцем города под названием Бель-Эйр

list-none

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посидеть здесь
  • Я расскажу вам, как я стал принцем города под названием Бель-Эйр
<ul>
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- . .. -->
</ul>
<ol>
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- ... -->
</ol>
<ul>
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- ... -->
</ul>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:list-disc to only apply the list-disc utility on hover.

<ul>
  <!-- ... -->
</ul>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more.

For example, use md:list-disc to apply the list-disc utility at only medium screen sizes and above.

<ul>
  <!-- ... -->
</ul>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет три утилиты для наиболее распространенных типов стилей списков. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.listStyleType Вашей конфигурации Tailwind.

tailwind.config.js

module.exports = {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

If you need to use a one-off list-style-type value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<ul>
  <!-- ... -->
</ul>

Learn more about arbitrary value support in the arbitrary values documentation.

html — Избавление от маркеров с

спросил

Изменено 2 года, 1 месяц назад

Просмотрено 494 тыс. раз

У меня есть следующий список:

 
    
 
  • Бенц
    • 
 
  • Другой Бенц
    • 
 
  • Другой Другой Бенц
    •

Я хочу избавиться от пуль, поэтому я попробовал:

 ul#otis {
 тип стиля списка: нет;
 }

Но это не сработало. Как правильно удалить маркеры из отображаемого списка?

  • HTML
  • HTML-списки

2

Предполагая, что это не сработало, вы можете объединить селектор на основе id с li , чтобы применить css к ли элементов:

 #отис ли {
    тип стиля списка: нет;
}

Ссылка:

  • list-style-type в Центре разработчиков Mozilla.

4

У меня была такая же крайне раздражающая проблема, так как скрипт не обращал внимания на мой лист стилей. Вот я и написал:

Это не сработало. Итак, вдобавок , я написал:

 
  •

    • Вуаля! это сработало!

    Следующий код

     #menu li{
  тип стиля списка: нет;
} 
     <ул>
    
  •  
    Корневой узел 1
    • 
    
  • Корневой узел 2
    •

    выдаст следующий результат:

    Чтобы удалить маркеры из ненумерованных списков, вы можете использовать:

     list-style: none;

    Вы также можете использовать:

     тип-стиля-списка: нет;

    Работает любой из них, но первый способ короче, чтобы получить тот же результат.

    Попробуйте вместо этого, проверено на Chrome/Safari

     ul {
 стиль списка: нет;
}

    0

    Чтобы удалить маркер из UL , вы можете просто использовать list-style: none; или тип-стиля списка: нет; Если все еще не работает, то я думаю, что есть проблема с приоритетом CSS . Может быть глобально UL уже определен. Так что лучше всего добавить класс/идентификатор к этому конкретному UL и добавить свои CSS есть. Надеюсь, это сработает.

    Поместите