試一試
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but
<del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
del {
text-decoration: line-through;
background-color: #ffbbbb;
color: #555555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
}
此元素通常(但不必須)透過對文字應用刪除線樣式來呈現。
屬性
此元素的屬性包括全域性屬性。
無障礙
在大多數螢幕閱讀器技術的預設配置中,del 元素的存在不會被播報。可以透過使用 CSS content 屬性,以及 ::before 和 ::after 偽元素使其被播報。
css
del::before,
del::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
del::before {
content: " [deletion start] ";
}
del::after {
content: " [deletion end] ";
}
一些使用螢幕閱讀器的使用者會故意停用播報會產生額外冗餘的內容。因此,重要的是不要濫用此技術,只在不瞭解內容已被刪除會不利於理解的情況下應用它。
示例
html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-del-element |
瀏覽器相容性
載入中…