Dot Leaders - führende Punkte
Für die Verwendung in WebSite X5
in einen HTML-Code Objekt bei
Punkt 4 Seiten. - natürlich
auch für andere Webeditoren.Beispiel für eine Speisekarte (das Pixabay-Bild ist nicht im Code unten enthalten)

Und hier der verwendete Code:
<style>
.toc li {
display: flex;
}
.toc li .title {
order: 1;
font-weight: bold;
}
.toc li .chapter {
order: 3;
font-weight: bold;
}
.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent
1.5px);
background-position: bottom;
background-size: 1ex 4.5px;
background-repeat: space no-repeat;
content: "";
flex-grow: 1;
height: 1em;
order: 2;
}
p {
text-align: left;
font-style: italic;
}
</style>
<div>
<ul class="toc">
<li> <span
class="title">CAPRICCIOSA</span> <span
class="chapter">7,95 Euro</span></li>
<p>Tomato sauce, mozzarella, Prosciutto Cotto cooked ham,
mushrooms & black olives</p><br>
<li> <span class="title">HAWAIIAN</span> <span
class="chapter">9,95 Euro</span></li>
<p>Tomato sauce, mozzarella, Prosciutto Cotto cooked ham &
Pineapple</p><br>
<li> <span class="title">HOT & SPICY</span>
<span class="chapter">7,95 Euro</span></li>
<p>Pepperoni, rødløg, jalapeños, peberfrugt, chili
flager</p><br>
<li> <span class="title">CHICKEN KEBAB</span>
<span class="chapter">5,25 Euro</span></li>
<p>Rødløg, kylling kebab, hvidløgsdressing</p><br>
<li> <span class="title">BBQ MIXED GRILL</span>
<span class="chapter">10,95 Euro</span></li>
<p>BBQ sauce, mozzarella, chicken, bacon, Prosciutto Cotto cooked
ham, beef, peppers & red onion</p>
</ul>
</div>
Der Code stammt von einem User der Community-Seite (Forum) von Incomedia, er wurde im Dezember 2022 etwas angepasst, damit der Preis fett und der Text in der jeweils 2. Zeile kursiv und schwarz ist - siehe Screenshot oben.
Incomedia Forum >> https://helpcenter.websitex5.com/de/community
Bearbeitungshinweise:
A) Den Code noch anpassen, siehe den unterstrichenen Teil unten für die Name der Speisen, den Preis und den Zusatztext.
<li> <span
class="title">CAPRICCIOSA</span>
<span class="chapter">7,95 Euro</span></li>
<p>Tomato sauce,
mozzarella, Prosciutto Cotto cooked ham, mushrooms & black olives</p><br>
B) Falls die Zahl der Speisen erhöht werden soll, dann einfach diese kleinen Code-Abschnitte- siehe A) - kopieren und unterhalb der anderen kleinen Code-Abschnitte hinzufügen, anschliessend noch den Text (siehe oben den unterstrichenen Teil) anpassen
C) Sollen Speisen aus der Speisekarte entfernt werden, dann einfach die entsprechenden kleinen Code-Abschnitte löschen.
D) Soll die Reihenfolge der Speisen geändert werden, dann einfach die Reihenfolge der kleinen Code-Abschnitte ändern.