Как подчеркнуть пробел из текста разной длины активным элементом? - PullRequest
Новая
       16

Как подчеркнуть пробел из текста разной длины активным элементом?

0 голосов
/ 23 марта 2019

Вот упражнение: у меня есть главное меню с элементами текста разной длины.Я хотел бы подчеркнуть активный элемент (только текст), но ниже, чем обычный текст.После копания в интернете я пришел к следующему: 

.current-menu-item:after {
    content: ""; 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
    padding-top: 2px; 
    border-bottom: 1px solid #ffffff; 
}

Проблема в том, что текст разной длины, ширина 80% работает не для всех.АТМ. Я занимался созданием разных меню (lame) ... Есть ли способ по-разному стилизовать каждый элемент, когда он активен под одним кодом (то есть с одним меню)?(например, есть список в .current-menu-item с инструкциями для .menu-item-xxx1, инструкциями для .menu-item-xxx2 и т. д ...?)

Или мне интересно в дикой природеа есть другое, более простое решение?

1 Ответ

0 голосов
/ 23 марта 2019

Попробуйте использовать :nth-child() для установки ширины: 

.current-menu-item:after {
   content: ""; 
   display: block; 
   margin: 0 auto;  
   padding-top: 2px; 
   border-bottom: 1px solid #ffffff; 
}

.current-menu-item:nth-child(1):after {
  width: 80%;
}

.current-menu-item:nth-child(2):after {
  width: 90%;
}

Примечание: Имейте в виду, что это не сработает на внутреннем дочернем элементе, если он только один.Например: если вы используете a элементы внутри li элементов для вашего меню.Тогда вам нужно подать li:nth-child() a:after, а не li a:nth-child():after.

...