Monat: Oktober 2014

Wenn man mal in die Verlegenheit kommen sollte, eine Liste mit eigenen Aufzählungszeichen machen zu müssen, wie zum Beipiel in “Auflistung von Vorteilen”, der kann das mit der Content-Eigenschaft gut machen. Allerdings sind die Dinger dann meist inline, so dass Zeilenumbrüche unter dem Listen-Symbol weitergehen, und eher fies zu positionieren.

Mit einem kleinen Trick geht’s aber auch einfacher:

// LESS code

  ul {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      display: table-row;
      &:before {
        content:'\002B'; // "+"
        font-size: 20px;
        line-height: 1.5;
        display: table-cell;
        padding-right: 5px; // Achtung: Margins und Borders greifen hier nicht mehr.
      }
    }
  }

Links

1. CSS Value Converter