Search code examples
csstei

css rule to selfclosed tag and open-close tag

On css I want to add a rule for a selfclosed tag like this: <unclear/> (exacly convert content to one symbol)

I already do it to add a different style for simple open-close tag <unclear>lorem ipsum</unclear> (I want to convert open tag <unclear> and closed tag </unclear> to a symbol so enclose a phrase inside symbols)

In css:

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

But with this rule for selfclosed tag I need to get one symbol not two.

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>

Solution

  • CSS does not differentiate between self-closing and not-self-closing tags. So if you have <unclear></unclear> and then <unclear/> later on, that's the same to CSS.

    In fact, even the XML parser doesn't differentiate: when building the document tree, the node in memory for <unclear></unclear> looks exactly the same as it does for <unclear/>.

    So that's the answer: it's impossible; find another way.

    One partial solution is to use the :empty pseudo class. You can use

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

    to assign the after content only to the <unclear> that contains something (in your particular example, the <unclear>lorem ipsum</unclear> one).
    <unclear>s which do not contain anything (here, the one that's written <unclear/>) only get the before content.

    Would that help?