Bonne façon de positionner: avant les pseudo-éléments

Quelle est la bonne façon de position :before et :after pseudo-éléments, comme des images? J'ai été déconner avec un tas de façons différentes, mais aucune d'entre elles semblent comme très élégant solutions.

C'est ce que j'essaie de faire:

Bonne façon de positionner: avant les pseudo-éléments

C'est ce que j'ai fait:

div.read-more a:before {
    content: url('/images/read_more_arrow_sm.png');
    position: absolute;
    top: 4px;
    left: -15px;
}

<div class="read-more">
    <a href="#">Read More</a>
</div>

En gros, je veux juste que l'image soit alignée avec le texte. Est-il une autre façon de le faire?

Il serait parfait si je pouvais le rembourrage et les marges sur les :before image, et c'est censé à ce que vous faites. Mais pour une raison quelconque, qui n'a pas été de travailler pour moi. Je peux ajouter rembourrage horizontal et les marges, mais le haut et le bas du rembourrage ne pas faire n'importe quoi. Pourquoi cela devrait-il se produire?

source d'informationauteur Syren

  1. 15

    Essayez d'utiliser background au lieu de content et de mettre un espace réservé dans content: http://jsfiddle.net/7X7x2/1/

  2. 12

    Vous pouvez utiliser le code suivant dans l'ordre de déplacer le contenu:

    div.read-more a:before {
  content: "
    div.read-more a:before {
content: "\00BB \0020";
position: relative;
top: -2px;
}
    BB 
    div.read-more a:before {
content: "\00BB \0020";
position: relative;
top: -2px;
}
    20"    ;
  position: relative;
  top: -2px;
}
  3. 11

    Si vous voulez seulement de la position de l'image proche du texte, alors vous avez probablement besoin d'vertical-align propriété:

    div.read-more a:before {
    vertical-align: bottom;
    content: url(image.png);
}

    Il ont des valeurs possibles suivantes: de base, sub, super, top, text-haut, milieu, bas, texte-bas

    Présente les valeurs calculées à partir de la position du texte à partir de la ligne de texte en cours (Lire la suite dans l'exemple).

    Référence complète: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

    (Pour ajouter un espace avant le texte suffit d'utiliser la marge de droite)

  4. 1

    C'était ma solution, avec un mouseover:

    div.read-more a:before {
    content: url(image.png);
    position: relative;
    top: 3px;
    left: -7px;
    padding-left: 7px;
}
div.read-more a:hover:before {
    content: url(image_hover.png);
}
  5. 0

    Vous avez besoin pour faire de position: relative .lisez-en plus et vous pouvez alors changer de position.

  6. 0

    Édité @Richard JP Le Guen violon afin qu'il corresponde à la version demandée un peu plus

    HTML

    <div class="read-more">
    <a href="#">Read More</a>
</div>

    CSS

    div.read-more a:before {
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
    content:"";
    width:21px;
    height:21px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 4px;
    line-height: 21px;
}
div.read-more {
    background: red;
    line-height: 21px;
    display:block;
    vertical-align:middle;
    width: max-content;
    padding: 4px;
}
div.read-more a{
    color: white;
    text-decoration:none;
}

    http://jsfiddle.net/7X7x2/688/