疑似要素 :before :after で年表を作る

• たとえばこのような図形をCSSで作るときに、、、

 .container dt{
width: 130px;
height: 40px;
font-size: 16px;
font-weight: bold;
background: #ffd800;
line-height: 40px;
text-align: center;
position: relative;
float: left;
}
.container dt:before{
display: block;
content:"";
width: 0;
height: 0;
border: 20px solid ;
border-color: transparent transparent transparent red;
position: absolute;
top: 0;
left: 130px;
}

• としても、

.container dt:after{
display: block;
content:"";
width: 0;
height: 0;
border: 20px solid ;
border-color: transparent transparent transparent red;
position: absolute;
top: 0;
left: 130px;
}

• としても見栄えは変わらない。position absoluteの基準は「:before」でも「:after」dtの左上だから。 

html

 <div class="container">
<dl>
<dt><span>1995年</span></dt>
<dd>
<h3>会社設立</h3>
<p>1月18日　有限会社フェリカを設立</p>
<h3>移転</h3>
<p>東京都豊島区南池袋1番　フェリカビル</p>
</dd>
</dl>
<dl>
<dt><span>1996年</span></dt>
<dd>
<h3>事業者届け</h3>
<p>６月６日　電気通信事業者届け</p>
<h3>組織変更</h3>
<p>株式会社に組織変更し設立</p>
</dd>
</dl>
<dl>
<dt><span>1998年</span></dt>
<dd>
<h3>事業者開設</h3>
<p>９月１９日　仙台事務所開設</p>
<h3>子会社化</h3>
<p>有限会社KKを子会社化</p>
</dd>
</dl>
</div>

css 

.container {
width: 800px;
margin: 50px auto;
position: relative;
}
.container:after{
content: "";
width: 2px;
border-left: 2px solid #ffd800;
position: absolute;
top: 0;
bottom: 0;
left: 20%;
}

.container dl {
overflow: hidden;
}

.container dt span {
width: 15%;
height: 40px;
font-size: 16px;
font-weight: bold;
background: #ffd800;
line-height: 40px;
text-align: center;
position: relative;
float: left;
}/* ポイントはdtだけfloatさせること*/

.container dt span:after {
display: block;
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #ffd800;
position: absolute;
top: 0;
left: 100%;
}/*　矢印部分 */

.container dd {
margin-left: 20%;
position: relative;
padding-top: 8px;
padding-left: 32px;
padding-bottom: 32px;
}

.container dd:before {
display: block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffd800;
position: absolute;
left: -7px;
top: 12px;
}

.container dd h3 {
line-height: 1;
margin-bottom: 5px;
padding-top: 5px;
}

.container dd p {
line-height: 1.5;
margin-bottom: 16px;
font-size: 14px;
}