通過CSS將文本添加到DT

Question

我想制作一個非常密集的dl布局。 dt與后面的dd在同一行。 因此，需要額外突出顯示以將dt與dd分開。 在傳統的書面文檔中，這是通過短划線或冒號完成的。

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

（h1，h2 ...-標頭也存在類似問題。如果僅通過在段落開始的同一行中加粗文本來實現標頭，則應在標頭文本后插入句點。在LaTex中有一個額外的命令，但是同樣，我想知道CSS是否可以做到這一點。）

（我知道這個問題 ，只是不確定在這里是否也適用。）

編輯：我意識到它對冒號的工作原理如下，但對短划線則無效

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

Answer 1

您可以這樣輸入em破折號，只要您的字符編碼允許並且您知道如何鍵入它即可。 您可以使用Windows-1252或utf-8。 但是隨后您需要正確聲明編碼，請參見http://www.w3.org/International/tutorials/tutorial-char-enc/

為了避免編碼問題，並且僅使用Ascii字符就可以編寫文檔，可以在CSS中使用“反斜杠轉義”，例如

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

（如果要輸入文本“ —”，即破折號和空格，則需要鍵入兩個空格： "\\2014 " 。這種怪異是由反斜杠轉義符占用其后的空格引起的。）

根據CSS規則， — 沒有特殊含義：只有七個數據字符。 即使您將其包含在HTML文檔的style元素中，舊的HTML規則也不會改變：解析HTML時， style元素被視為純文本，其中無法識別標記，所有字符都被視為純文本，傳遞給CSS解釋，當然結束標記</style>除外，它需要被識別。

原則上，XHTML會對此進行更改，在真正的XHTML（使用XHTML內容類型的服務器）中，在支持的瀏覽器（例如， 不是 IE 8）上，您可以使用以下content: "—" 在style元素中（因為該元素的內容已解析，因此可以識別實體引用）。 但是，這不是一個好主意，因為存在上述替代方案。

最后，您可以使用Ascii連字號減號（-）來代替破折號，但這是一個非常差的替代品，它是短而設計的，並且是在字內使用而不是用作標點符號。

Answer 2

這個小提琴會以任何方式幫助您嗎？ 據我所知，僅在CSS中執行此操作將忽略某些瀏覽器（IE7，可能是IE8）。

Answer 3

如果我理解正確，那么您鏈接的問題將完美地回答您的問題：

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:'. ';
}