Centrer pseudo element :before : problème insoluble !

parsimonhi a écrit :
Je n'ai pas bien compris ce qui doit être centré. Est-ce le "+" qui doit être centré au milieu du cercle, ou bien est-ce l'ensemble "+" + cercle qui doit être centré (horizontalement sur sa ligne ?) ?

Geraldt a écrit :
Il est possible d'utiliser du svg uniquement en CSS ?

background: url(plus.svg);

parsimonhi a écrit :


Il suffit de mettre un truc du genre :

background: url(plus.svg);

C'est a priori assez bien supporté par les navigateurs (mais il te faudra vérifier si c'est suffisamment supporté dans ton cas).

Amicalement,

Yordi a écrit :
Voici une proposition : http://codepen.io/anon/pen/zrmqLR

gc-nomade a écrit :
eventuellement, si flex te convient tu peut t'en servir sur le pseudo element:

https://jsfiddle.net/xmx4xcfc/7/

gc-nomade a écrit :
bonsoir, sous w7 chrome,safari,opera,FF,IE j'ai le même renduavec le test suivant:

- avec la font chargée,
- avec ou sans bordures
- avec un zoomx3 pour percevoir un peu mieux le decalage (minime en fait)
https://jsfiddle.net/xmx4xcfc/9/ (ajout des prefixes pour les navs plus anciens)

ul > li > a {
  font-size:0;
  border-radius:50px;
  height:50px;
  width:50px;
  border:2px solid #ccc;
  position:relative;
  display:block;
  text-decoration:none;
}
ul > li > a:before {
  font-family:arial;
  content:"+";
  display:block;
  position:absolute;
  text-align:center;
  font-size:50px;
  line-height:50px;
  top:0;
  left:0;
  right:0;
  bottom:0;
}