gatsu35 a écrit :
Il n'y a pas 36 solutions : Etant donné que ton élément :before est inline, il est comme ainsi dire partie intégrante du texte, la seule solution potable que j'ai trouvé, est de rajouter un padding-left:40px sur les LI histoire de bouger le texte, et ensuite, pour bouger notre élément afin qu'il ne soit plus collé au texte, j'ai du le sortir complètement du flux en utilisant position:absolute, et en utilise un margin-left:-40px.
Attention, pour déplacer notre élément, je n'utilise pas left, right, top, ou bottom,car ces valeurs se calent par rapport au premier élément position (position:relative, absolute, fixed), et donc ils iraient n'importe où et puis je n'ai pas envie de rajouter un position:relative sur mon LI, donc je déplace l'élément avec une marge negative.
Voilà c'est tout propre, j'ai cleané un tout petit peu ton code :
http://jsbin.com/utanij/7/edit
Code :
- .number
- {
- counter-reset: counter;
- }
- .number li
- {
- list-style-type: none;
- counter-increment: counter;
- margin-bottom: 15px;
- padding-left:40px;
- }
- .number li:before {
- content: counter(counter);
- padding: 0 10px;
- vertical-align: top;
- background: #ff8b0e;
- -moz-border-radius: 60px;
- border-radius: 60px;
- font-weight: bold;
- font-size: 1em;
- color: white;
- position:absolute;
- margin-left:-40px;
- }
|
|