今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...

於是又花了半天, 好不容易才試出來.

  1. 它可以支援跨多行的刪除線, 也可以在項目列表中使用. (我在 Google 中找到好多不同的作法, 都是不支援跨行, 或者沒辦法在 <ul><li><ol><li> 底下使用的).
  2. .article-content-inner 是因為要在痞客邦中使用才加上去的.
  3. 第 24 行是使用的例子. (用 <del><span class='del'> 把要刪除的文字括住即可)
  4. 這種作法有個好處是利用原本 <del> tag 的功效, 即使用 CSS 設定失效時, 依然可以有單刪除線.
<style type='text/css'>
...
.article-content-inner span.add     { color:navy; }
.article-content-inner del {
    padding:0; margin:0;
    position: relative;
    text-decoration:none;
    display: inline;
    top: 0.8em;
    left: 0;
    border-top: 5px double red;
}
.article-content-inner del > span.del {
    padding:0; margin:0;
    position: relative;
    top: -0.8em;
    left: 0;
    width:100%;
    color: black;
}
...
</style>
<body>
<p>原來的本文<del><span class='del'>這一小段要刪除</span></del>繼續原來的本文</p>
</body>

顯示的效果, 如下: (圖片)

CSS Double Strikeout

或者: (Browser)

原來的本文這一小段要刪除繼續原來的本文

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()