Marker ohne Inhalt
Ein ganz schlichtes Deko-Element
HTML
<div class="marker"></div>
CSS
.marker {
display: inline-block;
position: relative;
width: 2em;
height: 5em;
font-size: 4em; /* steuert die Größe des Markers */
background-color: #a20000;
box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: background-color 0.5s ease-in 0s;
-moz-transition: background-color 0.5s ease-in 0s;
-ms-transition: background-color 0.5s ease-in 0s;
-0-transition: background-color 0.5s ease-in 0s;
transition: background-color 0.5s ease-in 0s;
}
.marker:hover {
background-color: #666;
}
.marker:after {
content: ". . .";
display: block;
border: 1em solid transparent;
border-bottom: 1em solid #fff;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
body {padding: 40px;font-family: Verdana, sans-serif;}