[Résolu]Css soulignement avec retrait

Bonjour,
J'essaie désespérément d'avoir sur un menu horizontal mes liens qui ce souligne mais avec un retrait de chaque côté ( que le mot ne soie pas souligné complètement) j'ai essayé avec les % mais sans succès.

Est-ce possible ?
Modifié par doublemetre (06 Oct 2011 - 20:52)

Avec ça peut-être ?

selecteur:after {
  display: block;
  width: 70%; /* à changer selon tes besoins */
  margin: 0 auto;
  border-bottom: 1px solid #000; /* à styliser selon la nécessité */
}

Bonjour,

Si j'ai bien compris ce que tu veux faire, je pense que tu pourrais fonctionner avec un <span> à l'intérieur de tes liens :

HTML :

<ul id="menu">
    <li><a href="#">Un premier lien<span></span></a></li>
    <li><a href="#">Le 2ème<span></span></a></li>
    <li><a href="#">En voilà un troisième pour la route<span></span></a></li>
</ul>

CSS :

ul#menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul#menu li {
    float: left;
    text-align: center;
}

ul#menu a {
    line-height: 50px;
    padding: 0 20px;
    display: block;
    position: relative;
    background-color: red;
}

ul#menu a span {
    width: 50%;
    height: 5px;
    margin-left: -25%;
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: black;
}

ul#menu a:hover span {
    background-color: white;
}

L'inconveignant c'est qu'on a recours à une balise supplémentaire : <span>. Mais bon d'un point de vue sémantique cette balise est neutre donc ça ne pose pas problème.

Bon courage.

Ah et si tu optes pour cette solution, pour que ça fonctionne sur IE6 aussi il faut ajouter la règle CSS :

ul#menu a:hover {
    background-color: red;
}

Comme IE6 n'accepte que la pseudo-classe :hover sur les liens, il faut préciser une déclaration portant sur ce dernier précisément. De cette façon les éléments à l'intérieur (ici le <span>) réagiront comme prévu...