web-dev-qa-db-fra.com

Position correcte: avant les pseudo-éléments

Quelle est la bonne façon de positionner :before et :after pseudo-éléments, comme des images? J'ai joué avec un tas de façons différentes, mais aucune ne semble être une solution très élégante.

Voici ce que j'essaie de faire:

enter image description here

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>

Je veux simplement que l'image soit alignée sur le texte. Y a-t-il une autre façon de procéder?

Ce serait parfait si je pouvais simplement utiliser le rembourrage et les marges sur le :before image, et c'est supposé pour être ce que vous faites. Mais pour une raison quelconque, cela n'a pas fonctionné pour moi. Je peux ajouter un rembourrage horizontal et des marges, mais le rembourrage supérieur et inférieur ne fait rien. Pourquoi cela arriverait-il?

csspseudo-element
26
Syren

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

18
Richard JP Le Guen

Vous pouvez utiliser le code suivant pour déplacer le contenu:

div.read-more a:before {
  content: "\00BB \0020";
  position: relative;
  top: -2px;
}
23
Ricardo Huertas

Si vous souhaitez uniquement positionner l'image près du texte, vous avez probablement besoin de la propriété d'alignement vertical:

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

Il a les valeurs possibles suivantes: baseline, sub, super, top, text-top, middle, bottom, text-bottom

Cette valeur est calculée à partir de la position du texte à partir de la ligne de texte actuelle (en savoir plus dans l'exemple).

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

(Pour ajouter de l'espace avant le texte, utilisez simplement la marge de droite)

12
Alexey Ivanov

Ce fut ma solution, avec un survol:

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);
}
2
Bas

Modification du violon de @Richard JP Le Guen pour qu'il corresponde un peu plus à la version demandée

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/

0
thebigsmileXD

Vous devez faire position: par rapport à .read-more et ensuite vous pouvez changer de position.

0
Bunty