Aymen Kareem Aymen Kareem - 1 month ago 11
CSS Question

Need Explanation for Display, Before, After Attribute and Pseudo-Classes in CSS



nav.page-nav {
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
nav.page-nav .container {
display: -ms-flexbox;
}
nav.page-nav a {
display: block;
width: 9rem;
padding: 0 1.8rem;
border-right: 1px dotted #3d3d3d;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #c3c3c3;
text-shadow: 0 1px 0 #000;
}
nav.page-nav a:first-child {
border-left-width: 1px;
border-left-color: #3d3d3d;
}
nav.page-nav a:hover {
color: #e4e4e4;
background-color: black;
}
nav.page-nav .active {
color: white;
background: -ms-linear-gradient(#c95656, #8d0606);
background: linear-gradient(#c95656, #8d0606);
}
nav.page-nav .active:hover {
color: #fff;
}
nav.page-nav .active:before {
position: absolute;
top: 6rem;
display: block;
height: 0;
width: 0;
margin-left: -1.9rem;
border-top: 2rem solid #8d0606;
border-right: 6.5rem solid transparent;
content: "";
}
nav.page-nav .active:after {
position: absolute;
display: block;
height: 0;
width: 0;
margin-left: 4.3rem;
border-top: 2rem solid #8d0606;
border-left: 6.5rem solid transparent;
content: "";
}

<nav class="page-nav">
<div class="container">
<a href="/index.htm" class="active">Home</a>
<a href="/about.htm">About</a>
<a href="/schedule.htm">Schedule</a>
<a href="/register.htm">Register</a>
</div>
</nav>





I am confused with the
display: block
in the
nav.page-nav
a selector. If I change it to display: inline-block nothing change. Why?

I am also confused with the :before and :after. How do they work in the above code? I mean before supposed to be before the element no bellow it. They are shown bellow each active element.

Answer

The most common difference between display:block and inline-block is there alignment.

Display:Block by default takes full width and assigned height to there elements. Placement of display:block elements are one after another, whereas to align them in one line i.e. horizontally we need to use float:left, but display:inline-block elements are by default align in inline no need to used float:left.

Pseudo ::before - is used to assign some content or some style properties before the targeted element, but as you have assigned top:6rem to nav.page-nav .active:before so your before element is at bottom of target element. Pseudo ::after - is used to assign some content or some style properties after the targeted element.

nav.page-nav {
    background-color: #1d1d1d; 
    line-height: 6rem; 
    font-size: 1.7rem; 
}

/* TODO: nav.page-nav .container */
    nav.page-nav .container {
        display: -ms-flexbox;
    }

/* TODO: nav.page-nav a */
    nav.page-nav a {
        display: block;
        width: 9rem;
        padding: 0 1.8rem;
        border-right: 1px dotted #3d3d3d; 
        text-decoration: none; 
        text-transform: uppercase;
        text-align: center;
        color: #c3c3c3;
        text-shadow: 0 1px 0 #000;
            position:relative;
    }

/* TODO: nav.page-nav a:first-child */
        nav.page-nav a:first-child {
            border-left-width: 1px;
            border-left-color: #3d3d3d;
        }

/* TODO: nav.page-nav a:hover */
        nav.page-nav a:hover {
            color: #e4e4e4;
            background-color: black;
        }

/* TODO: nav.page-nav .active */
    nav.page-nav .active {
        color: white;
        background: -ms-linear-gradient(#c95656, #8d0606);
        background: linear-gradient(#c95656, #8d0606); 
    }


/* TODO: nav.page-nav .active:hover */
        nav.page-nav .active:hover {
            color: #fff;
        }

/* TODO: nav.page-nav .active:before */
        nav.page-nav .active:before {
            position: absolute;
            top:6rem;
            left:0;
            display: block;
            height: 0;
            width: 0;
            border-top: 2rem solid #8d0606;
            border-right: 6.5rem solid transparent;
            content: "";
        }

/* TODO: nav.page-nav .active:after */
        nav.page-nav .active:after {
            position: absolute;
            display: block;
            height: 0;
            width: 0;
            border-top: 2rem solid #8d0606;
            border-left: 6.5rem solid transparent;
            content: "";
            bottom:-2rem;
            right:0;
        }
<nav class="page-nav">
<div class="container">
<a href="/index.htm" class="active">Home</a>
<a href="/about.htm">About</a>
<a href="/schedule.htm">Schedule</a>
<a href="/register.htm">Register</a>
</div>
</nav>