Supprimer le soulignement du contenu des pseudo-classes after et before

**laurentSc** · 25/01/2016, 15h20

Bonjour,

je m'occupe d'un menu. Si un champ du menu comporte un sous-menu, je lui applique une pseudo-classe after ou before pour signaler la présence du sous-menu. Par contre, lors du survol, je souligne le texte du lien :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu li:hover > a {
	text-decoration:underline;
}

mais si je fais ça, ça souligne aussi le contenu de la pseudo-classe after ou before, celle-ci faisant aussi partie du lien. Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="plus" href="#" > ... </a>

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
}

Peut-on éviter ce soulignement ?

**nef1912** · 25/01/2016, 16h32

Bonjour,

Pourrais-tu poster un exemple complet de ton code stp? Ce sera plus clair pour t'aider. Pour voir concrètement le problème sans avoir à recoller les morceaux.

Merci

Invité · 25/01/2016, 18h17

Bonjour,

Envoyé par laurentSc

...mais si je fais ça, ça souligne aussi le contenu de la pseudo-classe after ou before...

Ah bon ? tu es sûr ?

N.B. Encore une fois, tu donnes un code impossible à tester...

**laurentSc** · 25/01/2016, 23h18

Envoyé par jreaux62

Bonjour,

Ah bon ? tu es sûr ?

N.B. Encore une fois, tu donnes un code impossible à tester...

Le voilà en entier (c'est long mais testable) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    	<style>
 
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:6.5em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
        text-decoration:underline;
}
.menu li:hover > ul,.menu li:hover > ul li:hover > ul{
  display: block;
}
/* position et dimension des sous menus */
.menu li {
        height:50em:
}
.menu li ul {
        top:100%;
        width:9em;
}
 
.menu ul li {   
  margin:0;
  width:9em;
  height:50em:
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
/* indicateur de présence d'un sous menu */
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
  text-decoration:none;
}
 
 
 
 
 
 
        </style>
  </head>
  <body>
<ul class="menu">
	<li><a class="plus" href="#"><span>menu1</span></a>
		<ul>
 
 
			<li><a href="#"><span>smenu1</span></a></li>
			<li><a href="#"><span>smenu2</span></a></li>
			<li><a  class="plus" href="#"><span>smenu3</span></a>
				<ul>
					<li><a href="#"><span >ssmenu1</span></a></li>
					<li><a href="#"><span >ssmenu2</span></a></li>
				</ul>
			</li>
		</ul
	</li>
	<li><a  href="#" ><span>menu2</span></a></li>
</ul>
  </body>
</html>

Et Jérôme, ça serait sympa de faire le ménage dans tes MPs car je voulais t'en faire suivre un que j'ai reçu ce soir, et qui vaut son pesant de cacahuètes, mais ta boîte est saturée et pas possible...

**nef1912** · 26/01/2016, 08h55

Bonjour,

Voici une méthode fonctionnelle sur les navigateurs récents (sup à IE8) qui consiste à exclure les liens a.plus de ta propriété indiquant le soulignement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.menu li:hover > a:not(.plus) {
	text-decoration:underline;
}

Si j'ai bien compris le problème, ça devrait répondre à ton besoin.

Au cas où : CanIUse

Invité · 26/01/2016, 09h45

Bonjour,

dans le code que tu donnes ci-dessus, les flèches ne se soulignent pas au survol.

N.B. J'ai fait le ménage dans ma boite MP.

**Inikaam** · 26/01/2016, 11h06

Bonjour laurentSc,

Bien que les :after et :before soient des pseudos sélecteurs, ils réagissent comme des éléments lorsqu'il s'agit de l'héritage des propriétés css, et sont, pour certains navigateurs, considérés comme appartenant à ton a.
En conséquence, il faut que tu précises quelque chose de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu li:hover > a.plus:after {
	text-decoration: none;
}

**laurentSc** · 26/01/2016, 15h31

Merci pour vos réponses.

@ nef1912 : justement, il faut que ça marche avec IE8

@ jreaux62 : effectivement pas avec FF, mais avec IE8, si.

@ Inikaam : j'ai testé ton code, mais ça ne veut pas

Au fait, je viens de voir qu'il manque 2 lignes dans le CSS (hier, pas besoin, mais aujourd'hui, si) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    	<style>
 
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:6.5em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
        text-decoration:underline;
  /*background:#4D90FE;
 
  color:#FFF;*/
}
.menu li:hover > ul,.menu li:hover > ul li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
/* position et dimension des sous menus */
.menu li {
        height:50em:
}
.menu li ul {
        top:100%;
        width:9em;
}
 
.menu ul li {   
  margin:0;
  width:9em;
  height:50em:
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
/* indicateur de présence d'un sous menu */
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
  text-decoration:none;
}
.menu li:hover > a.plus:after {
        text-decoration: none;
}
 
 
 
 
 
 
 
 
 
 
 
        </style>
  </head>
  <body>
<ul class="menu">
	<li><a class="plus" href="#"><span>menu1</span></a>
		<ul>
 
 
			<li><a href="#"><span>smenu1</span></a></li>
			<li><a href="#"><span>smenu2</span></a></li>
			<li><a  class="plus" href="#"><span>smenu3</span></a>
				<ul>
					<li><a href="#"><span >ssmenu1</span></a></li>
					<li><a href="#"><span >ssmenu2</span></a></li>
				</ul>
			</li>
		</ul
	</li>
	<li><a  href="#" ><span>menu2</span></a></li>
</ul>
  </body>
</html>

**Inikaam** · 26/01/2016, 16h42

Envoyé par laurentSc

@ Inikaam : j'ai testé ton code, mais ça ne veut pas

Tu me fais de la peine là ^^
Peux tu vérifier, via le debugger du navigateur, que le code est correctement pris en compte (sélecteur, priorité des css, etc)
Sinon, essaie d'appliquer ton texte-decoration à ton li plutôt que ton a, tu auras peut-être un meilleur résultat.

Envoyé par laurentSc

@ nef1912 : justement, il faut que ça marche avec IE8

@ jreaux62 : effectivement pas avec FF, mais avec IE8, si.

Attention, IE8 supporte très mal les pseudos sélecteurs comme :after et :before. Il ne les affiche pas systématiquement et a un comportement bizarre avec.
J'ai déjà vu des after totalement ignorés par IE8, parfois, une autre méthode est préférable quand on fait de la rétrocompatibilité.

edit : la prochaine fois que tu mettras ton code source, pourras-tu stp séparer le html du css, la coloration syntaxique aide beaucoup à la lisibilité ^^

**laurentSc** · 26/01/2016, 19h10

Envoyé par Inikaam

Peux tu vérifier, via le debugger du navigateur, que le code est correctement pris en compte (sélecteur, priorité des css, etc)

toutes les propriétés CSS liées à after sont barrées, néanmoins certaines sont prises en compte comme par exemple content.

Envoyé par Inikaam

Sinon, essaie d'appliquer ton texte-decoration à ton li plutôt que ton a, tu auras peut-être un meilleur résultat.

Je ne vois pas ; tu peux préciser ?

Envoyé par Inikaam

Attention, IE8 supporte très mal les pseudos sélecteurs comme :after et :before. Il ne les affiche pas systématiquement et a un comportement bizarre avec.
J'ai déjà vu des after totalement ignorés par IE8, parfois, une autre méthode est préférable quand on fait de la rétrocompatibilité.

Tu penses à quelle autre méthode ?

Envoyé par Inikaam

edit : la prochaine fois que tu mettras ton code source, pourras-tu stp séparer le html du css, la coloration syntaxique aide beaucoup à la lisibilité ^^

OK

:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:6.5em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  width:9em;
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
  /*background:#4D90FE;
 
  color:#FFF;*/
}
.menu li:hover > ul,.menu li:hover > ul li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
/* position et dimension des sous menus */
.menu li {
	height:50em:
}
.menu li ul {
	top:100%;
	width:9em;
}
 
.menu ul li {	
  margin:0;
  width:9em;
  height:50em:
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
/* indicateur de présence d'un sous menu */
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
  text-decoration:none;
}

**Inikaam** · 26/01/2016, 20h17

Aaah, merci, j'y vois mieux :p

Si les propriétés css de ton after sont partiellement barrées, c'est qu'il y a une autre instruction css qui passe par dessus, essaie de voir laquelle et où elle se situe dans ton code, tu trouveras peut-être la source du problème.

Je vois aussi que ton after est en float: right, il est possible que ça crée une sorte d'espace dans ton élément a qui soit considéré comme devant être souligné. la solution à ça serait de mettre un position: relative sur ton a et un position absolute sur ton after, comme ça tu le places tranquillement avec right et top.

L'idée alternative consiste simplement à ce que ton élément after devienne un élément html complet, comme un i ou un span. Avec un css similaire (mais je suggère un positionnement absolu), tu pourrais obtenir un résultat qui marche sous IE8 à coup sûr et qui en prime résoudrait ton problème de soulignement. Un truc de ce genre en fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<li><a  class="plus" href="#"><span>smenu3</span></a><i class="icon-right-arrow"></i>
    <ul>
        <li><a href="#"><span >ssmenu1</span></a></li>
        <li><a href="#"><span >ssmenu2</span></a></li>
    </ul>
</li>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.icon-right-arrow {
    content: "\25BA";
    position: absolute;
    top: 3px; // A régler
    right: -10px; // A régler
    color:#ABC;
    text-decoration:none;
}

Après avoir revu ton code, ma proposition sur le text-decoration n'était pas viable en définitive ^^

**CCyrillus** · 26/01/2016, 23h03

en principe, sans modifier le contexte de formatage par defaut du lien (inline), si les pseudo sont hors du flux( float/absolute) , il ne sont pas soulignés:

Le premier code que tu donnes ne montre pas de soulignement sur les pseudos
le second non plus.

quelques test que tu peut vérifier avec ton navigateur, dont ton code ... à propos quel navigateur/media utilises tu pour tes tests ?

http://codepen.io/anon/pen/wMmQKQ

<edit> et si vraiment ton nav n'en fait qu'a sa tête, et bien tu passe ton pseudo en before sur le <li> ... http://codepen.io/anon/pen/JGLeZO

**laurentSc** · 27/01/2016, 12h03

Pas testé le truc de Inikaam car directement testé la 2e idée de CCyrillus (car mon navigateur n'en faisait qu'à sa tête) qui fonctionne

EDIT : je viens de tester le code de Inikaam mais il ne marche pas.

Sinon, mon navigateur est IE8.

**laurentSc** · 28/01/2016, 15h10

J'ai adopté la 2e proposition de CCyrillus mais il y a quelque chose que je n'arrive pas à faire : modifier la position de la flèche ; en fait, elle est collée au coin supérieur droit de l'élément html sur lequel porte le before et je voudrais notamment la descendre, sauf que si je mets une propriété top, ça ne fait rien. Donc comment faire ?

Code actuel et testable :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="menu">
	<li class="plus"><a  href="#"><span>menu1</span></a>
		<ul>
 
 
			<li><a href="#"><span>smenu1</span></a></li>
			<li><a href="#"><span>smenu2</span></a></li>
			<li class="plus"><a   href="#"><span>smenu3</span></a>
				<ul>
					<li><a href="#"><span >ssmenu1</span></a></li>
					<li><a href="#"><span >ssmenu2</span></a></li>
				</ul>
			</li>
		</ul
	</li>
	<li><a  href="#" ><span>menu2</span></a></li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:4em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
  position : relative;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  width:5em;
  height:2em;
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
}
.menu li:hover > ul,.menu li:hover > ul li:hover > ul{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
/* position et dimension des sous menus */
 
.menu ul li {	
  margin:0;
  width:5em;
  height:2em:
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
 
li {float:left;}
 
li a {
  text-decoration:none;
}
.menu li:hover > a {
	text-decoration:underline;
}
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
}

Invité · 29/01/2016, 10h31

Bonjour Laurent,

il faut VRAIMENT que tu arrêtes de poster dès que tu éternues ou avales de travers...

APPRENDS LE CSS !!!
Il y a des cours, FAQ et glossaire sur DVP !!

C'est la meilleure façon de COMPRENDRE LE CSS !!

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
li.plus:before{
  display:inline-block;
  margin-top:7px;
}

OU

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
li.plus:before{
  position:relative;
  top:7px;
}

Les 2 fonctionnent. A TOI de comprendre comment, et pourquoi.
(indice : en REGARDANT DANS LE GLOSSAIRE CSS !!)

**laurentSc** · 29/01/2016, 10h46

Merci Jérôme ; ça confirme bien que je suis léger en CSS car j'avais bien tenté la 2e solution, mais sans le position:relative;

**laurentSc** · 29/01/2016, 23h18

Envoyé par jreaux62

(indice : en REGARDANT DANS LE GLOSSAIRE CSS !!)

Carrément nul, car même en regardant le glossaire, pas trouvé l'explication pour aucune des solutions

**laurentSc** · 30/01/2016, 17h17

Je me suis de nouveau penché sur la question et je pense les avoir comprise toutes les 2. Je donne les explications trouvées et ça serait bien qu'on me dise si c'est juste.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
li.plus:before{
  display:inline-block;
  margin-top:7px;
}

margin-top est une propriété de boîte d'où on doit spécifier que le li.plus:before est inline-block (et block tout court marche aussi)(mais l'important est que le dimensionnement fonctionne d'où inline-block suffit)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
li.plus:before{
  position:relative;
  top:7px;
}

Pour que la propriété top fonctionne, il faut que l'élément soit positionné et les 7px sont par rapport à la position dans le flux de l'élément d'où relative.

**NoSmoking** · 31/01/2016, 15h17

Bonjour et navré de m’immiscer dans la discussion !

• En utilisant la solution proposé par CCyrillus, qui est de loin la plus pertinente dans ton cas, il te suffit de déplacer le padding qui se trouve sur tes éléments <a> pour les reporter sur tes éléments <li>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
/*  padding:0.5em;  /* A Supprimer */
  font-weight:bold;
  text-decoration:none;
  color:#00F;
  position : relative;
}
 
.menu li {
  width:5em;
  height:2em;
  margin:0 2em;
  padding:0.5em;  /* Déplacé ICI */
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
 
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
}

• Je ne peux l’empêché également de me poser la question, pour IE8, de la déclaration dans ton CSS de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

• Et pour finir à quoi servent tous tes <span> dans tes <a> ?

**laurentSc** · 31/01/2016, 15h47

Merci pour ton intervention NoSmoking ;

IE8, c'est de l'histoire ancienne que j'avais gardée en tête car de fait, je suis en IE11.

Les span ici ne servent à rien, mais dans le code réel (là ce n'est qu'une version de test), je leur applique du CSS...

Supprimer le soulignement du contenu des pseudo-classes after et before

CSS

Discussions similaires

Partager

Partager