Могу ли я сделать нижнюю границу более узкой, чем ?

#html #css

#HTML #css

Вопрос:

В главном меню, если ссылка на меню активна, внизу есть граница. Это работает нормально. У меня есть следующий CSS:

 .active {
  text-decoration: none;
  border-bottom: 4px solid #888;
}

В настоящее время border-bottom имеет ширину текста внутри элемента списка. Но я хотел бы сделать его намного уже. Возможно ли это?

Вот HTML

 <ul class="nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="about.html">About</a></li>
</ul>

1. вы всегда можете попробовать использовать псевдоэлемент :after?

2. Да, это невозможно, вы можете работать с :after псевдоэлементом. Вы также можете анимировать подчеркивания и другие интересные вещи codepen.io/Webketje/pen/rhjpl

Ответ №1:

Попробуйте использовать псевдоэлемент :after для достижения этой цели, поскольку я не думаю, что возможно сделать границу более узкой, чем ширина элемента.

Проверьте эту скрипку:http://jsfiddle.net/6QfNs /

Ответ №2:

Граница не может быть уже элемента, на котором она установлена. Таким образом, вы не можете достичь своей цели с помощью border.

НО

Вы можете использовать псевдоэлемент, установить на нем границу и придать ему желаемую ширину :

ДЕМОНСТРАЦИЯ

CSS :

 .active:after {
    content:'';
    display:block;
    width:20px;
    border-bottom: 4px solid #888;
 }

Ответ №3:

Техника использования псевдоэлементов очень знакома и хорошо известна при решении проблем такого рода. Однако я хотел бы представить другой способ, используя linear-gradient background, просто общий доступ для каждого:

 /* span is your menu item here */
span {
  font-size:20px;
  padding:4px;
  cursor:pointer;
}
span:hover {
  background:linear-gradient(red,red) no-repeat;
  background-size:60% 4px;
  background-position:center bottom;
}