Pfeile und Balken mit Pseudoelement erzeugen

by Jens Grochtdreis

HTML

<ul class="bcnew">
      <li><a href="#">Unternehmer-Clans</a></li>
      <li><a href="#">Schwellenländer</a></li>
    </ul>

CSS

.bcnew {list-style-type: none;margin: 50px 0 0  0; float: left;}
    .bcnew li {float: left;margin: 0;position: relative;}
    .bcnew a {display: block;padding: 5px 10px;background-color: #CED4D4;position: relative; margin-right: 5px;text-decoration: none;}
    .bcnew a:hover {background-color: #a20000;color: #fff;}

.bcnew a:before {content:""; display: block;width: 0; height:0;
border: 10px solid transparent; 
   border-top-color:#CED4D4;  
   position: absolute;
   bottom: -20px; left: 50%; 
    margin-left: -10px
}
.bcnew a:hover:before { border-top-color: #a20000;}

body:before { content: ""; display: block; width: 100%; height: 12px;
background: blue; }