Border-top lenght sur un submenu

Bonjour,

J'ai mis un border top sur mon submenu mais je voudrais qu'il ne fasse que 70% de la largueur. Ca n'a pas l'ai si simple, qqn pour m'aider ?
Site: yesyouweb.com, passage de la souris sur Expertises et donc la bordure rose en haut du menu.

Merciiiiii et bonne soirée

Hello

Il n'est pas possible de limiter la longueur d'une border. En revanche on peut contrôler la longueur d'un élément.

De tête , je ferai comme ceci:

.fusion-main-menu > ul > li > a {
 position: relative;
}
.fusion-main-menu > ul > li > a:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 width: 70%;
 background-color: transparent;
}
.fusion-main-menu > ul > li >a:hover::before {
 background-color: red;
}

Ah ! Grillé... tant pis je poste quand-même mon pen : CodePen

La partie essentielle du code :

.test {
  position: relative;
}
.test::before {
  position: absolute;
  left: 15%;
  content: '';
  display: block;
  height: 0.5em;
  width: 70%;
}

@Olivier

Sauf erreur de ma part, un élément positionné en absolue sera automatiquement en display block.

pour le lien Codepen
Modifié par allan00958 (29 Dec 2021 - 23:29)

@allan00958 : non tout à fait, c'est une redondance, on peut l'enlever.

Merci pour vos réponses, je vais essayer !

Bonjour et bonnes période de fêtes.

j'arrive aprés la bataille et je suis surpris que personne n'ai proposé une fausse bordure à l'aide d'un gradient. Ceux-ci peuvent être positionné et taillé facilement sur le fond d'un élément.

Par exemple en remplaçant la règle de la bordure

border-top: var(--dropdown_menu_top_border_size) solid var(--menu_hover_first_color);

par une de background avec les 70% de largeur:

background: linear-gradient(var(--menu_hover_first_color),var(--menu_hover_first_color)) 0 0 / 70% var(--dropdown_menu_top_border_size)  no-repeat;

Du coup , on peut l'animer en appliquant par défaut une largeur de 0

background: linear-gradient(var(--menu_hover_first_color),var(--menu_hover_first_color)) 0 0 / 0 var(--dropdown_menu_top_border_size)  no-repeat;
transition:0.25s;

Comme ce n'est pas une véritable bordure, il peut-être utile d'ajouter un padding-top pour libérer l'espace de la bordure visuelle:

padding-top:var(--dropdown_menu_top_border_size);

Si d'autres images de fonds ou gradients sont impliqués, il faut déclarer celui de la fausse bordure en premier de façon à ce qu'il s'affiche au dessus des autres et donner les valeurs de background-size/background-repeat et background-position qui conviennent à chacun.

Cdt
Modifié par gcyrillus (30 Dec 2021 - 12:04)