Как подчеркнуть и увеличить в меню название страницы, на которой находится пользователь?

Question

Есть такой код для оформления ссылок в горизонтальном меню. (помогите оформить сниппет)

    <header>
    <div class ="headerContainer">
    <nav role ="navigation">
    <ul class = "mainMenu" >
    <li><a href ="index.html">Главная</a></li>
    <li><a href ="#">Мои проекты</a></li>
    <li><a href ="#">Контакты</a></li>
    <li><a href ="#">Новости</a></li>   
    </ul>
    </nav>
    </div>
    </header>

*{

padding: 0;
margin : 0;
}

li {
list-style: none;
display: flex;
}

a {
text-decoration: none;
}

header {
background: #F5F5F5;
padding: 22px 0px;
}

 .headerContainer {
width : 1400px;
margin : 0 auto; 

display: flex;
justify-content: space-between;
}

.headerContainer a {
display: flex;
position: relative;
color : #000;
font-size: 16px;
padding: 6px 6px;

}

.headerContainer a:before{
content: '';
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 2px;
background-color: #ADD8E6;
transition: 0.2s;
}
.headerContainer a:hover:before {
 width: 100%;
 left: 0;
 }

ul{
display: flex;
}

<!-- end snippet -->

Как можно сделать так, чтобы пока пользователь находится на странице Главная подчеркивание ссылки оставалось? Псевдо-элемент active не подходит, так как срабатывает только в момент нажатия.

Answer 1

Обычное делается так, мы даем класс active тому элементу списка на странице которого мы находимся, я дал "Главная" class active и дал ему красный цвет к примеру, на обычном html без cms это выглядит так. Если ты делаешь на WP например, то нужно через js с этим работать

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  display: flex;
}

a {
  text-decoration: none;
}

.active {
  color: red
}

header {
  background: #F5F5F5;
  padding: 22px 0px;
}

.headerContainer {
  width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.headerContainer a {
  display: flex;
  position: relative;
  color: #000;
  font-size: 16px;
  padding: 6px 6px;
}

.headerContainer a:before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #ADD8E6;
  transition: 0.2s;
}

.headerContainer a:hover:before {
  width: 100%;
  left: 0;
}

ul {
  display: flex;
}

<header>
  <div class="headerContainer">
    <nav role="navigation">
      <ul class="mainMenu">
        <li class="active"><a href="index.html">Главная</a></li>
        <li><a href="#">Мои проекты</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
    </nav>
  </div>
</header>

БЛОГ НА HUSL

Как подчеркнуть и увеличить в меню название страницы, на которой находится пользователь?

Ответы (1 шт):