---
title: "CSS lista. A1 A2 A3, B1 B2 B3"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/168234-css-lista-a1-a2-a3-b1-b2-b3"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Mattias Nordin"
published: "2008-01-19T14:07:41.000Z"
updated: "2008-02-11T16:49:09.000Z"
replies: 11
views: 987
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/168234-css-lista-a1-a2-a3-b1-b2-b3"
---

# CSS lista. A1 A2 A3, B1 B2 B3

## #1 — Mattias Nordin, 2008-01-19T14:07Z

Hej,

jag försöker lära mig hur man kan styra listor med CSS. Går det att lägga på ett prefix på en lista så att lista A heter A1, A2, A3 och att lista B heter B1, B2, B3 osv...

  :stud

Och så undrar jag om man kan får listan (bullet:A1) att vara 20px hög medans texten i listan är tex 10px hög.

Permalänk: https://www.webforum.nu/p/168234

## #2 — zcorpan, 2008-01-19T21:10Z

Än så länge är inte ::marker implementerat nånstans (vad jag vet), så man får använda vanliga ::before. 

```
ol { list-style-type:none; counter-reset:a; }
li::before { content:"A" counter(a) " "; counter-increment:a; font-size:2em; }
```

Permalänk: https://www.webforum.nu/p/2071479

## #3 — dAEk, 2008-01-22T20:22Z

Petnoga som jag är undrar jag om det inte ska vara **:**before, alltså med bara ett kolon? 

Fast kollar man på w3 står det ::before för CSS 3 men det är ju :before som gäller i CSS 2/2.1. Vilket är det som gäller eller spelar det ingen roll?

Permalänk: https://www.webforum.nu/p/2075035

## #4 — zcorpan, 2008-01-22T21:16Z

Som du säger är det ::before enligt Selectors level 3 och :before enligt CSS 2.1. Webbläsare borde förstås ha stöd för båda (som Selectors kräver), så i praktiken spelar det ingen roll. Anledningen till att det ändrades till två kolon för pseudo-element är för att man ska kunna se skillnad på pseudo-element och psuedo-klasser utan att behöva känna igen nyckelordet...

Permalänk: https://www.webforum.nu/p/2075050

## #5 — dAEk, 2008-01-22T21:21Z

Okaj, tackar för förklaringen. :)

Permalänk: https://www.webforum.nu/p/2075055

## #6 — Mattias Nordin, 2008-02-09T19:47Z

Tack för era svar. 

Men jag får det inte att fungera. Får inte några bullets alls. Ser bara en lista på 1 2 3.

```
ol{
list-style-type:none;
counter-reset:a;
}
li::before{
content:"A" counter(a) " ";
counter-increment:a;
font-size:2em;
}

<ol>
<li> 1
<li> 2
<li> 3
</ol>
```

Kör docktype strict. 

Fann även

> Note: If "display: none" is used you should not be able to reset the counter. If "visibility: hidden" is used you should be able to reset the counter.

men jag vet inte vad det betyder.   :stud 

Mvh
Mattias

Permalänk: https://www.webforum.nu/p/2078693

## #7 — w333!, 2008-02-09T22:21Z

Hej Mattias!

Prova att använda en annan webbläsare än Microsoft Internet Explorer så ser du att det inte är något fel på din kod.

Du har helt enkelt råkat hamna på fel sida av "the bleeding edge" iom att det du testar inte stöds av MSIE7 :bire

Permalänk: https://www.webforum.nu/p/2078723

## #8 — Mattias Nordin, 2008-02-11T09:10Z

w333 du dyker verkligen upp lite överallt ;)

Ok. Najs då vet jag. 

Ligger lågt med detta tillsvidare. Men det är klart önskvärt att kunna hantera listor på detta sätt. Läste att IE8 är på väg: <http://www.idg.se/2.1085/1.137701>

Om jag får följa upp på samma spår, finns det något mer dynamiskt CSS sätt att uppnå nedan. Det jag skulle vilja underlätta är att lägga in nya stycken i min lista (den är lång) utan att behöva ändra alla A3, A4 numreringar. 

> \<a name="A1"\>\</a\> A1 - Här kommer rubriken för stycke A1
>                                    Text text text 
>                                    Text text text 
>                                    Text text text 
>                                    Text text text 
> 
> 
> \<a name="A2"\>\</a\> A2 - Här kommer rubriken för stycke A2
>                                    Text text text 
>                                    Text text text 
>                                    Text text text 
>                                    Text text text

Permalänk: https://www.webforum.nu/p/2078938

## #9 — w333!, 2008-02-11T12:02Z

> **Mattias Nordin skrev:**
>
> w333 du dyker verkligen upp lite överallt ;)

Hehe - ja, det var verkligen trevligt i lördags :bire

Men jag förstår inte riktigt hur du menar med det där sista, kan du beskriva det med andra ord och kanske ett annat exempel ?

Permalänk: https://www.webforum.nu/p/2078963

## #10 — Mattias Nordin, 2008-02-11T12:47Z

Ha ha... menade bara i andra trådar här på forumet. Bra jobbat av någon som bara hunnit posta 11 inlägg och lyckats pricka flera av mina. (y)

Permalänk: https://www.webforum.nu/p/2078984

## #11 — w333!, 2008-02-11T16:36Z

OK - Tack - Jag trodde ett tag där att du också var med bland dem som hävdar att jag är någon annan :)

Men jag förstår faktiskt inte det där sista du skrev iallafall ;)

> **Mattias Nordin skrev:**
>
> Om jag får följa upp på samma spår, finns det något mer dynamiskt CSS sätt att uppnå nedan. Det jag skulle vilja underlätta är att lägga in nya stycken i min lista (den är lång) utan att behöva ändra alla A3, A4 numreringar. 
> 
> 
>
>
> > \<a name="A1"\>\</a\> A1 - Här kommer rubriken för stycke A1
> >                                    Text text text 
> >                                    Text text text 
> >                                    Text text text 
> >                                    Text text text 
> > 
> > 
> > \<a name="A2"\>\</a\> A2 - Här kommer rubriken för stycke A2
> >                                    Text text text 
> >                                    Text text text 
> >                                    Text text text 
> >                                    Text text text

 Hur menar du? Kan du formulera det med andra ord eller med ett annat exempel också ?

Permalänk: https://www.webforum.nu/p/2079030

## #12 — Mattias Nordin, 2008-02-11T16:49Z

Jag har en massa stycken text som jag vill ha \<a name= länkar till. Alla stycken har ett namn som tex stycke A1, B38. 

För det första så skulle jag önska att det gick att använda \<li\> för att skapa mina A1, A2 bullets och det verkar fungera i moderna webläsare (exklusive IE7) enligt zcorpan.

Undrar nu om man kunde baka ihop den funktionen med att få dynamiska \<a name länkar. Som jag har gjort nu så är alla \<a name namn hårdkodade och blir drygt att ändra alla \<a name namn om jag vill infoga ett nytt stycke som ska ligga mellan A2 och A3. Då behöver jag byta namn på alla länkar efter denna (om jag envisas med att de ska ha samma namn som min bullet).

Exempel på mina stycken:

A1

A2

A3

...

A44

A45

B1

B2

B3

osv.

Vill då att det ska gå att skapa en direktlänk till #A3.
(enligt principen <http://www.webforum.nu/showthread.php?p=1390573#post1390573>)

Mvh
Mattias Nordin

Permalänk: https://www.webforum.nu/p/2079032

---

Tråden på webben: https://www.webforum.nu/amne/html-css/168234-css-lista-a1-a2-a3-b1-b2-b3