CSS Add an Horizontal line in <summary>

[SpongeBOB]

Hi,

I would like to have a <details>\<summary> that got an horizontal line across the page.. like this

---------- ► To expand ----------

---------- ▼ Expended ----------
blabla
blabla

I've tried the following

    <details open>
        <summary>Summary</summary>
        Blablabla
    </details>

summary {
  text-align: center; 
  font-size: 1em;
  cursor: pointer;
}
hr {     
    overflow: visible;
    text-align: center;   
    width: 90%;
    height: 0px;
    border: solid black 1px;
}
hr:after {
    background: white;
    content: 'Super test';
    padding: 0 7px;
    position: relative;
   top: -11px   
}

/* test */

summary[open] > hr:before {
  content: 'test'
}

Result ->


So of course the :marker is not aligned with the rest, that why I tried summary[open] but it's not working (without [open] it does..)

Any ideas ??

 

[SpongeBOB]

I've found ! ( I'll post the solution later on )

summary::marker{
    content: ''
}

hr{   
  display: inline-block;
}

details span:before {
    content: '►';
}

details[open] .SummSpan:before {
    content: '▼';
}
span{
display: inline-block;
}

<summary>
    <hr>
        <span>Your Title section</span>
    <hr>
</summary>

To adapt to your need but this the idea