今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...
於是又花了半天, 好不容易才試出來.
- 它可以支援跨多行的刪除線, 也可以在項目列表中使用. (我在 Google 中找到好多不同的作法, 都是不支援跨行, 或者沒辦法在 <ul><li> 和 <ol><li> 底下使用的).
- .article-content-inner 是因為要在痞客邦中使用才加上去的.
- 第 24 行是使用的例子. (用 <del> 和 <span class='del'> 把要刪除的文字括住即可)
- 這種作法有個好處是利用原本 <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>
顯示的效果, 如下: (圖片)
或者: (Browser)
原來的本文這一小段要刪除繼續原來的本文
文章標籤
全站熱搜
留言列表