Html – Make all the targets of the ':target' pseudo-class visible

I want to make targets of the :target pseudo-class visible. That is, if the target is a block element, e.g. <p>, that <p> should be outlined; and if the target is an inline element, e.g. <span>, that <span> should be outlined; and if the target is an empty <a> element, there should be a horizontal line.

:target:not(a:target) {
  outline: red dashed 1px;
}

a:target::before {
  content: '';
  display: block;
  border-top: red dashed 1px;
}

<p><a href="#empty-a">empty a</a></p>
<p><a href="#p">p</a></p>
<p><a href="#span">span</a></p>
<p>...</p>
<a id="empty-a"></a>
<p id="p">this is <span id="span">the</span> target</p>

This example works, but there is a problem: a target that is a regular, non-empty <a> element will have a line on tp of it, not an outline, and this breaks consistency.

:target:not(a:target) {
  outline: red dashed 1px;
}

a:target::before {
  content: '';
  display: block;
  border-top: red dashed 1px;
}

<p><a href="#nonempty-a">non-empty a</a></p>
<p>...</p>
<p>this is <a href="#" id="nonempty-a">the</a> target</p>

Could anybody help to fix it?

Edit

Question: Why using an empty link to start with? – Temani Afif

Answer: This is a technique (that I borrowed from Apple) that allows to target single place using multiple #-links. For example

<p><a href="yellow">yellow</a></p>
<p><a href="hot">hot</a></p>
<p>...</p>
<a id="yellow"></a>
<a id="hot"></a>
<h1>Sun</h1>