通過css添加文本到dt

我想做一個非常密集的dl佈局。 dt與隨後的dd相同。所以需要額外的突出顯示來區分dt和dd。在傳統的書面文件中，這是通過mdash或冒號完成的。通過css添加文本到dt

是否可以通過CSS指定，還是必須根據我選擇的樣式重寫數據？

（h1，h2 ... - headers有一個類似的問題，如果只通過在段落開始的同一行加粗文本來實現頭文件，則應在頭文本後插入句點。乳膠有這個額外的命令，但同樣，我不知道CSS能做到這一點）

（我知道this question，只是不知道這是否也適用於這兒）

編輯：我知道它對冒號的作用如下，但不適用於mdashes

.myclass dt:after { content: ":"}

來源

2012-07-29 false

這個fiddle以任何方式幫助你？純粹使用CSS會忽略一些瀏覽器（IE7，可能是IE8）。

來源

2012-07-29 09:45:47

確實如此，謝謝！所以我必須使用UTF-8來獲取mdash。我不能使用象徵性的mdash - 對嗎？ – false 2012-07-29 09:49:26

—;？不，不在內容屬性AFAIK中。你可以使用轉義的unicode：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ – 2012-07-29 09:51:03

如果我理解正確的話，那麼你鏈接的問題回答您的問題完美：

dt:after { 
    content:': '; /* or content:' – '; 
}

頁眉：

h1, h2, h3, h4, h5, h6 { 
    font-weight:bold; 
    display:inline; 
} 
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after { 
    content:'. '; 
}

來源

2012-07-29 09:47:02 knittl

我正在尋找做'—'這讓我感到困惑。謝謝！ – false 2012-07-29 09:51:17

您可以通過輸入破折號字符作爲這樣做到這一點，前提你的字符編碼允許你知道如何輸入。您可以使用例如windows-1252或utf-8。但是，您需要正確聲明編碼，請參閱http://www.w3.org/International/tutorials/tutorial-char-enc/

爲了避免編碼問題，並且能夠使用Ascii字符編寫文檔，可以在CSS中使用「反斜槓轉義」，例如

dt:after { content: "\2014"; }

（如果你想有文字「 - 」，即長劃線和空間，你需要輸入兩個空間："\2014 "這一奇怪現象是由一個反斜線後，它消耗了空間的慣例造成的。）

通過CSS規則，—沒有什麼特別的含義：它只有7個數據字符。即使您在HTML文檔的style元素中使用它，情況也不會因舊的HTML規則而改變：在解析HTML時，style元素被視爲純文本，其中沒有識別標記，所有字符都是這樣的，傳遞給CSS解釋，當然除了需要識別的結束標記</style>。

在原理上，XHTML改變這一點，並且在真正XHTML（使用XHTML內容類型的服務器），上支持的瀏覽器（例如，不 IE 8），可以使用在一個style元件content: "—"（由於內容該元素被解析以便識別實體引用）。然而這不是一個好主意，因爲有上述的替代方案。

最後，您可以使用Ascii連字符「 - 」代替破折號，但它是一個非常差的替代品，簡稱和設計在詞內使用，而不是用作標點符號。

來源

2012-07-29 10:32:46

通過css添加文本到dt

回答

相關問題