CSS : Style le contenu de l'avant pseudo-élément sur une liste

Je suis en train de style une liste ordonnée (pas de dot, une frontière avec le rayon et la faire pivoter de 45°)

<div class="test">
  <ol>
    <li><span>it's a test</span></li>
    <li><span>and again</span></li>
  </ol>
</div>

Et le css

.test ol {
  counter-reset: li;
  list-style-type: none;
}
.test ol > li {
  position:relative;
  list-style:none;
}
.test ol > li:before {
  content:counter(li);
  counter-increment:li;

  position:absolute;
  top:-2px;
  left:-24px;
  width:21px;

  color:#E2202D;
  font-weight:bold;
  font-family:"Helvetica Neue", Arial, sans-serif;
  text-align:center;
  border: 1px dashed #E2202D;
  -webkit-border-radius:6px;
  border-radius:6px;
  -webkit-transform: rotate(45deg);
}

Il me donner que

Et c'est ici que je suis blocage... Comment faire pivoter la frontière, sans tourner le nombre à l'intérieur ? Comment découper le contenu d'un pseudo-élément en css ?

Merci pour les conseils 🙂

InformationsquelleAutor barbuk | 2012-02-10
  1. 7

    Il n'y a pas moyen de faire tourner la frontière et les textes séparément. Au lieu de cela, vous pouvez diviser le nombre et la frontière entre les deux types de pseudo-éléments, :before et :after.

    Voir: http://jsbin.com/agotuj/54/edit

    .test ol {
    counter-reset: li;
    list-style-type: none;
}
.test ol > li {
    position: relative;
    list-style: none;
    margin-bottom: 20px;
    padding-left: 5px;
}
.test ol > li:before, .test ol > li:after {
    position: absolute;
    top: -2px;
    left: -24px;
    width: 21px;
    height: 21px;
    line-height: 21px;
    font-size: 16px;
}
.test ol > li:before {
    content: counter(li);
    counter-increment: li;
    color: #E2202D;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}
.test ol > li:after {
    content: '';
    border: 1px dashed #E2202D;
    border-radius: 6px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
    • tu m'as devancé de quelques secondes 🙂
    • Bien, merci beaucoup pour les conseils !
    • S'il vous PLAÎT, n'oubliez pas le standard du W3C syntaxe pour transform! Non seulement les navigateurs WebKit en charge. Même IE9 supporte avec -ms-.
    • Oui, je suis d'accord. Il n'est pas dans ma réponse déjà parce qu'il n'était pas dans l'OP du code qui j'ai simplement copié. J'aurais approuvé, édition si j'avais vu ça dans le temps. De toute façon, je l'ai corrigé.
    • Je ne peux pas attendre jusqu'au jour de préfixes de devenir obsolète.
    InformationsquelleAutor thirtydot
  2. -2
    {"data":{"error":"HTTP Access is disabled. Requests must use SSL (HTTPS)."},"success":false,"status":400}
    • Absolument non pertinent comme réponse, et devrait être supprimé.
    InformationsquelleAutor Craig Scott