Before and After Indicators with CSS

Uses the :before and :after pseudo classes to create a triangle shaped indicator arrow.

by Pete Fecteau

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Before and After Indicators with CSS</title>
</head>

<body>
<div id="wrapper">
  <div class="original">
      <a href="#" class="avatar"><img src="#" height="100" width="100"></a>
      <div class="comment">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae quam quis lectus tincidunt blandit. Phasellus id nunc nisl, vel tincidunt lorem. Cras vel lectus non velit accumsan fringilla. Suspendisse potenti. Mauris in lacus quam.</p>
      </div>
  </div>      
  <div class="reply">
      <a href="#" class="avatar"><img src="#" height="100" width="100"></a>
      <div class="comment">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae quam quis lectus tincidunt blandit. Phasellus id nunc nisl, vel tincidunt lorem. Cras vel lectus non velit accumsan fringilla. Suspendisse potenti. Mauris in lacus quam.</p>
      </div>
  </div>
  <div class="reply">
      <a href="#" class="avatar"><img src="#" height="100" width="100"></a>
      <div class="comment">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae quam quis lectus tincidunt blandit. Phasellus id nunc nisl, vel tincidunt lorem. Cras vel lectus non velit accumsan fringilla. Suspendisse potenti. Mauris in lacus quam.</p>
      </div>
  </div>
<div class="original">
      <a href="#" class="avatar"><img src="#" height="100" width="100"></a>
      <div class="comment">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae quam quis lectus tincidunt blandit. Phasellus id nunc nisl, vel tincidunt lorem. Cras vel lectus non velit accumsan fringilla. Suspendisse potenti. Mauris in lacus quam.</p>
      </div>
  </div>
  <div class="reply"...

CSS

body {
    font-family:Helvetica, Arial, san-serif;
    font-size: 14px;
    line-height:150%;
    background:#999;
    padding:0;
    margin:0;
}
p {
    padding:0;
    margin:0;
}
#wrapper {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-250px;
    width:500px;
    padding:15px;
    background:#FFF;
}
.original, .reply {
    float:left;
    width:100%;
    margin:10px 0;
    border-bottom:1px solid #999;
    padding-bottom:10px;
}
.original .avatar {
    float:right;
}
.original .avatar:before {
    border-color:transparent;
    content:"";
    position:relative;
    top:-95px;
    left:0;
    border-style:solid;
    border-width:15px;
    height:0;
    width:0;
    border-right-color:#999;
    font-size:0;
}
.reply .avatar {
    float:left;
}
.reply .avatar:after {
    border-color:transparent;
    content:"";
    position:relative;
    top:-95px;
    lright:0;
    border-style:solid;
    border-width:15px;
    height:0;
    width:0;
    border-left-color:#999;
    font-size:0;
}
.comment {
    padding:0;
    width:355px;
}
.avatar {
    display:block;
}
.avatar img {
    background-color:#999;
    padding:5px;
}
.original .comment {
    float:left;
}
.reply .comment {
    float:right;
}