Tankestreck i listor i HTML
2011-09-13 16:00 - Utvecklingstips av Christian Landgren
Christian Landgren
Systemutvecklare
Iteam
De inbyggda HTML koderna UL och LI har inte stöd för (det i svenskan vanligaste?) listformatet:
- Åtgärd 1
- Åtgärd 2
- Åtgärd 3
- Åtgärd 4
De val som finns i CSS för punktlistor är: ”Square”, ”Circle”, ”Decimal” osv men inte ”Hyphen”.
Så här skriver du för att få till detta i browsers som stöder Content i CSS (dvs från IE8 och framåt). Och MÅSTE man stöda äldre versioner av IE finns det också ett hack för dessa.
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
}
li:before {
content: "- ";
}
li{ behavior:expression(!this.before ? this.before= this.innerHTML = '- ' + this.innerHTML);
}
</style>
...
<ul>
<li>number 1 task</li>
<li>number 2 task</li>
<li>number 3 task</li>
<li>number 4 task</li>
<li>number 5 task</li>
<li>number 6 task</li>
</ul>
</body>
</html>
Ger:
Om du vill använda ett långt tankestreck skriver du istället:
content: "\2014\a0";
... och du vet väl att Iteam just nu söker duktiga medarbetare? Läs mer på iteam.se
Andra bloggar om:
HTML,
CSS,
hyphen