scss 自定义列表css

Posted 2021-05-17

ul {
  list-style-position: inside;
  margin-left: 1.8rem;

  li::before {
    content: "\25CF";
    color: $open-color-primary;
    display: inline-block;
    width: 1em;
    margin-left: -2em;
    margin-right: .5em;
    text-align: right;
    direction: rtl;
    font-size: 1.1rem;
  }
}

ol {
  list-style: none;
  counter-reset: li;
  list-style-position: inside;
  margin-bottom: $spacing-xxl;
  margin-left: 2rem;

  li::before {
    content: counter(li) ". ";
    color: $open-color-primary;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: .4em;
    text-align: right;
    font-size: 1.4rem;
  }

  li {
    counter-increment: li;
  }
}