selfclosed 标签和 open-close 标签的 css 规则

Question

在 css 上，我想为这样的 selfclosed 标签添加一个规则:<unclear/> (准确地将内容转换为一个符号)

我已经为简单的开闭标签添加了不同的样式 <unclear>lorem ipsum</unclear> (我想将打开标签 <unclear> 和关闭标签 </unclear> 转换为一个符号，所以在符号内包含一个短语)

在 CSS 中:

unclear:before{ content:'\2020'; }
unclear:after{ content:'\2020'; }

但是有了这个 selfclosed 标签规则，我需要得到一个符号而不是两个。

unclear:before{
	content:'\2020';
}
unclear:after{
	content:'\2020';
}

<h1>Example1</h1>
<div>Somno contentus exiguo, cum id posceret tempus et ratio, perque spatia ita longissima impendio castus, ut nec <unclear/> mare ministro saltem suspicione tenus posset redargui, quod crimen, etiamsi non invenit, malignitas fingit in summarum licentia potestatum.</div>
...
<br />
<br />
<h1>Example2</h1>
<div>Intellectus autem naturae et <unclear>qualitate</unclear> sensus mundi ex omnibus, quae in mundo sensibilia sunt, poterit peruideri.</div>
...
<br />
<br />
<h1>Example3</h1>
<div>On my website this is display two cruces before finiruris, but I want to display one cruces beforefiniruris, how to do it?
Ager est <unclear/>finiruris <gap/> non praetermittimus nomina consent<supplied>i</supplied>entia condicionibus possessionum.</div>

Answer 1

CSS 不区分自闭标签和非自闭标签。所以如果你有 <unclear></unclear>然后 <unclear/>稍后，这与 CSS 相同。

事实上，即使是 XML 解析器也不区分:在构建文档树时，内存中的节点为 <unclear></unclear>看起来与 <unclear/> 完全一样.

所以这就是答案:这是不可能的；另辟蹊径。

一个部分解决方案是使用 :empty伪类。你可以使用

unclear:before{ content:'\2020'; }
unclear:not(:empty):after{ content:'\2020'; }

仅将 after 内容分配给包含某些内容(在您的特定示例中为 <unclear>lorem ipsum</unclear> 的 )。
不包含任何内容的 (这里是写成 <unclear/> 的)只会得到 之前 的内容。

这有帮助吗？