Benutzerdefinierte Symbole (oder Icons) können in CSS erstellt werden, indem Pseudo-Elemente wie `::before` oder `::after` verwendet und ihnen eine Kombination aus spezifischen Stilen und Inhalten zugewiesen wird. Manchmal nutzen Entwickler auch bestimmte Zeichensatz wie Font Awesome, um schneller auf eine Reihe von vordefinierten Symbolen zugreifen zu können. Hier ist ein einfaches Beispiel, wie Sie ein benutzerdefiniertes Symbol in CSS erstellen können:
```css
div::before {
content: ‘✓’;
color: blue;
margin-right: 5px;
}
```
In diesem Beispiel wird das Symbol (ein ankreuzen Zeichen) vor dem Inhalt eines `div` Elements eingefügt. Sie können das Symbol, die Farbe, den Abstand und viele andere Stile nach Ihren Wünschen anpassen.
Es wird darauf hingewiesen, dass der `content` Eigenschaft nur Textzeichen übergeben werden können. Für komplexere Symbole oder solche, die nicht als Textzeichen dargestellt werden können, könnten Sie in Betracht ziehen, ein Bild-artiges Symbol zu verwenden und es mit der `background` Eigenschaft hinzuzufügen:
```css
div::before {
content: ‘’;
display: inline-block;
width: 20px;
height: 20px;
background: url(‘path-to-icon.png’) no-repeat center center;
background-size: contain;
}
```
In diesem Fall würde das Symbol als Hintergrund des hinzugefügten Pseudo-Elements festgelegt. Sie können die Größe und Position des Symbols anpassen, indem Sie die entsprechenden Eigenschaften ändern.
