body { margin:0; padding:0; } a { text-decoration:none; color:white; } /* demo1 */ .demo1 { display:flex; } .navItem { width:100px; height:40px; line-height:40px; background-color:#05c8eb; text-align:center; position:relative; } .navItem::before { content:'['; } .navItem::after { content:']'; } .navItem::before,.navItem::after { display:inline-block; clear:both; opacity:0; transition:.3s; color:white; } .navItem:hover::before { transform:translateX(-10px); opacity:1; } .navItem:hover::after { transform:translateX(10px); opacity:1; }