gcyrillus Use target , clear and float to move arrow in front of targetted elements

dabblet.css

/* gcyrillus Use target , clear and float to move arrow in front of targetted elements */
div {min-height:3em;}
.target  {width:80%;border:solid;}
.target, ul {display:table;margin:auto;border-spacing:5px;}
li {display:table-cell;text-align:center;background:#eee;padding:3px;border:solid;}
#fleche {
margin:0 0 0 3px;
clear:left;
width:1em;
line-height:8em;
float:none;
border:none;
}
.target div {float:right;width:97%;border-radius:1em;border:double;margin:1em auto;}
hr {evisibility:hidden;clear:right;float:right;width:1px;margin:-0.5em 0;}
:target {float:left;}
:target + div {background:#ddd;}

dabblet.html

<ul><li><a href="#zun">un</a></li><li><a href="#zdeux">deux</a></li><li><a href="#ztrois">trois</a></li><li><a href="#zquatre">quatre</a></li></ul>
<div class="target">

<hr id="zun"/><div> <h1>un</h1>
<p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est 
actitatum, cuius hunc novimus esse textum. cum Africam pro consule</p> </div>
<hr id="zdeux"/><div> <h1>deux</h1>
<p> regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano
 populo destinatis frumentum dedit, pauloque postea cum provenisset 
segetum copia, integre sine ulla restituit mora.</p> </div>
<hr id="ztrois"/><div> <h1>trois</h1>
<p>Cuius acerbitati uxor grave accesserat incentivum, germanitate Augusti 
turgida supra modum, quam Hannibaliano regi fratris filio antehac 
Constantinus iunxerat pater, Megaera quaedam mortalis, inflammatrix 
saevientis adsidua, humani cruoris avida nihil mitius quam maritus; qui 
paulatim eruditiores facti processu temporis ad nocendum per 
clandestinos versutosque rumigerulos conpertis leviter addere quaedam 
male suetos falsa et placentia sibi discentes, adfectati regni vel 
artium nefandarum calumnias insontibus adfligebant.</p> </div>
<hr id="zquatre"/><div> <h1>quatre</h1> 
<p>Quibus occurrere bene pertinax miles explicatis ordinibus parans 
hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem 
proximos iam gestu terrebat sed eum in certamen alacriter consurgentem 
revocavere ductores rati intempestivum anceps subire certamen cum haut 
longe muri distarent, quorum tutela securitas poterat in solido locari 
cunctorum.</p></div>
<div id="fleche">&#9658;</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}