Is there an easier way, that would be understandable for beginners? - html

Question

I found this menu that displays border at bottom, i would like to learn how to do it, but i don't understand how its done, is there an easier way that the same thing would be achieved?
Here is the URL: https://codepen.io/atomas/pen/zBoEZe?editors=1100
HTML:
<ul>
<li class="elm selected">Home</li>
<li class="elm">Services</li>
<li class="elm">About</li>
<li class="elm bar">Contact</li>
</ul>
CSS:
$elementsNumber: 4;
$width: 1/$elementsNumber;
* {
box-sizing: border-box;
}
ul {
position: relative;
margin: 50px auto;
width: 80%;
padding: 0;
list-style: none;
color: #000;
overflow: auto;
overflow: hidden;
li {
float: left;
padding: 15px;
font-size: 18px;
font-family: Roboto;
font-weight: 700;
width: percentage($width);
text-align: center;
cursor: pointer;
border-bottom: 4px solid #555;
}
.bar:before {
overflow: hidden;
content: "";
position: absolute;
top: 54px;
bottom: 0;
transition: all 0.25s;
left: 0;
width: percentage($width);
height: 4px;
background: red;
}
}
#for $i from 1 through $elementsNumber {
li:nth-child( #{$i} ) {
&.selected~.bar:before,
&.elm:hover~.bar:before,
&.selected.bar:before,
&.elm.bar:hover:before
{
left: percentage( ( $i - 1 ) * $width );
}
}
}

Answer 1

* { box-sizing: border-box;}
ul {
padding: 0;
list-style: none;
color: #000;
}
li {
float: left;
padding: 15px;
font-size: 18px;
font-family: Roboto;
font-weight: 700;
text-align: center;
border-bottom: 4px solid #555;
transition: all 0.3s;
}
li:hover {
border-bottom: 4px solid red;
}
<ul>
<li class="elm selected">Home</li>
<li class="elm">Services</li>
<li class="elm">About</li>
<li class="elm bar">Contact</li>
</ul>

Answer 2

If you'd just want a border on the bottom of the menu you can just use border-bottom:
body, html {
margin: 0;
padding: 0;
}
header {
background-color: #eee;
}
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc;
}
ul>li {
display: inline-block;
padding: 0 15px 0 15px;
margin-left: -4px;
}
ul>li:first-child {
margin-left: 0;
}
ul>li>a {
display: block;
color: #333;
text-decoration: none;
padding: 5px 0 5px 0;
}
ul>li:hover {
border-bottom: 5px solid #555;
margin-bottom: -5px
}
<header>
<nav>
<ul>
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</header>

Answer 3

That css does a lot more than just adding a border at the bottom.
The grey border you see at the bottom is displayed through:
li {
float: left;
padding: 15px;
font-size: 18px;
font-family: Roboto;
font-weight: 700;
width: percentage($width);
text-align: center;
cursor: pointer;
***border-bottom: 4px solid #555***;
}
However, the css also adds a component which highlights the specific li element which is being hovered over to make the border-bottom red.
The width property at the top just makes sure each li element gets equal space horizontally in the browser:
$elementsNumber: 4;
$width: 1/$elementsNumber;
In order to achieve the same red hover as your codepen illustrates, you will need to write some css such as li:hover etc. to mimic the same effect.
That css you have is definitely more complicated than it needs to be but works for the intended purpose. Taking a look at w3schools link here should help you understand the hover property and other useful properties in CSS.
Hope this helped!