使用css3僞元素製做時間軸而且實現鼠標選中高亮效果

利用css3來製做時間軸的知識要點：僞元素，以及如何在僞元素上添加錨僞類

1）::before 在元素以前添加內容。
2）::after 在元素以後添加內容。

提示：亦可寫成 :before :after CSS3將僞對象選擇符前面的單個冒號(:)修改成雙冒號(::)用以區別僞類選擇符，但之前的寫法仍然有效。

預覽地址：http://www.yangqq.com/web/time.html

代碼分析：右邊那條黑色豎線，能夠當作是右邊框、也能夠用僞元素after或者before實現，因此方法有不少，下面的只做爲一種參考，或許你有更好的寫法
使用方法：

p::before { content: " "; } /*在p元素前添加內容 */

html代碼：

<div class="blogs">
  <div class="bloglist">
    <h2><a href="/" target="_blank">我但願個人愛情是這樣的</a></h2>
    <ul>
      <a href="/"><img src="/web/24/images/s1.jpg"></a>
      <p> 我但願個人愛情是這樣的，相濡以沫，舉案齊眉，平淡如水。我在歲月中找到他，依靠他，將一輩子交付給他。作他的妻子，他孩子的母親，爲他作飯，洗衣服，縫一顆掉了的鈕釦。而後，咱們一塊兒在時光中變老。</p>
    </ul>
  </div>
</div>

主要CSS代碼：

.blogs { width: 670px; margin: 20px auto; position: relative; }
.blogs::before { content: ""; width: 2px; height: 100%; top: 0; bottom: 0; right: 0; background: #000; position: absolute } /* 右側的黑色豎軸線 */
.bloglist { background: #222; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); width: 630px; color: #b9b9b9; border-radius: 6px; }
.bloglist::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #111; position: absolute; left: 630px; top: 40px; }/* 三角形 */
.bloglist::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 662px; top: 36px; background: #000; border: 2px solid #333; z-index: 10; }/* 圓形 */
.bloglist:hover::after { border-color: #ccc; }/* 鼠標放上去 圓形邊框變色 */

轉自：http://www.yangqq.com/jstt/css3/2013-08-19/598.html