僅在元素自身顯示時在:: before和元素self之間添加餘量

我一直試圖解決這一段時間。作爲一個例子，這個代碼;僅在元素自身顯示時在:: before和元素self之間添加餘量

<span class="icon">save</span> lorem ipsum 
<span class="icon"><span class="screenreader">edit</span></span> lorem ipsum

隨着::之前，我添加一個圖標的跨度。那裏沒有問題。現在我想在圖標和「標籤」之間添加一個邊距。但只有在顯示標籤的情況下。例如，'編輯'標籤隱藏，純粹在屏幕閱讀器的代碼中。

一個例子說超過一千字; http://codepen.io/anon/pen/jbWwbb

請注意，在第二行上lorem ipsum之前有什麼不需要的餘量。我怎樣才能解決這個問題，而不添加額外的標記到HTML？

Thanx！

來源

2015-09-14 Bartezz

我舉雙手贊成你的無障礙意識的做法！這種跨度爲屏幕閱讀者提供了哪些好處？除了在視覺上隱藏文本/包括要發表的文本？ – albert

Thanx！不是我的想法，也不是來自同事的創造性借鑑。據我所知，它的唯一目的就是你剛剛描述的：這是視障者使用屏幕閱讀器將文本轉換爲語音或盲文的後備。 – Bartezz

您可以簡單地在僞元素內容之後添加一個空格並刪除保留權限。這將起作用，因爲瀏覽器會摺疊多個空格並僅渲染一個空格。

.icon:before { 
    content: '❤ '; /* space after heart will make a trick */ 
}

因此，它會在兩種情況下按預期呈現。

.screenreader { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
.icon { 
 
    color: red; 
 
} 
 
.icon:before { 
 
    content: '❤ '; 
 
}

<span class="icon">save</span> lorem ipsum 
 
<br> 
 
<span class="icon"><span class="screenreader">edit</span></span> lorem ipsum

來源

2015-09-14 21:01:32 dfsq

快速和骯髒的解決方案！可能在特定用例中工作。然而，這不允許我指定邊距的寬度。 – Bartezz

對不起，我花了超過5分鐘來編輯上面的評論（phonecall）：快速和骯髒的解決方案！可能是特定用例的解決方案。但是這不允許我指定邊距的寬度。另外，它總是會增加空間。即使不需要，就像.icon在容器中對齊時一樣。 – Bartezz

僅在元素自身顯示時在:: before和元素self之間添加餘量

回答

相關問題