web-dev-qa-db-fra.com

: avant,: après et rembourrage

J'ai le code CSS suivant:

.readMore:before {
    content: '';
    display: block;
    float: left;
    width: 10px;
    height: 27px;
    margin: 0;
    background: red url('images/button.png');
    background-position: 0 0;
}

.readMore {
    float: left;
    height: 24px;
    background: url('images/button.png');
    background-position: -10px 0;
    border: 0;
    margin: 0;
    padding: 4px 0 0 0;
    cursor: pointer: 
}

.readMore:after {
    content: '';
    display: block;
    float: right;
    width: 10px;
    height: 27px;
    margin: 0;
    top: -3px;
    background: red url('images/button.png');
    background-position: -411px 0;
}

Quels styles un lien qui ressemble à ceci: enter image description here

Mais lorsque vous essayez d'ajuster le texte dans le .readMore en vertical, les images: avant et: après obtiennent également des "sauts" vers le bas. Ce qui est logique, mais existe-t-il une solution pour qu'elle s'aligne mieux avec "l'image totale"?

cssimagehyperlinkpadding
15
JohnSmith

J'ai tendance à utiliser le positionnement absolute pour les éléments: avant et: après. Ensuite, vous pouvez faire tout ce que vous voulez au parent sans vous soucier de vos pseudo-éléments n'importe où (à moins, bien sûr, de déplacer l'élément lui-même).

Voir sur JSFiddle

html

<div></div>

css

div {
  position: relative;
  background: #eee;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 30px;
}
div:before {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  left: -10px;
  content:"";
  background: #222;
}
div:after {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  right: -10px;
  content:"";
  background: #222;
}

Cela montre comment je les disposerais. Vous pouvez ensuite utiliser n'importe quelle méthode pour ajuster la position du texte dans le parent.

Les points clés du code ci-dessus sont les suivants:

  1. Le parent est relativement positionné. Cela nous permet d'utiliser un positionnement absolu sur ses enfants, les pseudo-éléments, pour les placer par rapport à leur parent.
  2. La position gauche et droite des éléments avant et après, respectivement, est égale à leur largeur si vous souhaitez que les éléments soient bord à bord.

Si vous souhaitez centrer le texte dans le parent div verticalement, et qu'il ne s'agit que d'une seule ligne, vous pouvez définir la hauteur de ligne égale à la hauteur du conteneur. Voir ça ici . Ce serait mieux que de "deviner" le rembourrage pour le centrer verticalement, si c'est ce que vous cherchez.

Bien sûr, il existe également d'autres façons de centrer le texte verticalement, et en conséquence, il y a beaucoup de SO questions sur le sujet. Voici une seule .

24
jamesplease