Border-top lenght sur un submenu

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)