Need a code adjustment for 'details'

[musyc]

I've been gone from DW for a couple of years, and in that time it seems some people have started using details instead of cut to make a pseudo-cut tag. It messes with me visually on my reading page.

I have a custom layer and can edit bits and pieces, but I've managed to confuse myself as to whether I need to edit the layer or throw some custom css on.

I want to make the 'details' span visually identical to a cut tag - bold, underline, parentheses. I've skimmed old entries here for cut tags, and I have a couple of thoughts mulling. I can probably do the B and U easily enough, and match the color to my entry-links (#1f142e), but I'm banging my head on how to get the parentheses in place. Matching the arrow would be nice, too, but it doesn't bother me as much as the lack of the cut-tag visual elements.

screenclip example images:
"Details" as pseudo-cut:

Actual cut:

Comments

[luckyzukky]

i did something like this (the parentheses) with a custom layout of mine using ::before and ::after tags -


summary::before {
content: '( ';
color: #1f142e;
}

summary::after {
content: ' )';
color: #1f142e;
}


[misbegotten]

That's awesome. Thanks!

[musyc]

Thank you!

[vex_verlain]

Here is what you want. (It's also saved on my CodePen.)

summary {
font-weight: bold;
text-decoration: underline;
color: #1f142e;
list-style-type: none;
}

/* FYI, {text-decoration:none} does not work for ::before or ::after. */

details > summary::before {
content: url('https://www.dreamwidth.org/img/collapse.svg') ' ( ';
text-decoration: underline #fff;
}

details[open] > summary::before {
content: url('https://www.dreamwidth.org/img/expand.svg') ' ( ';
text-decoration: underline #fff;
}

summary::after {
content: ' )';
text-decoration: underline #fff;
}

I spent four hours trying to figure this out for you because I feel guilty for doing things like this. (Details and summary elements that are styled within an inch of their lives—and some details are automatically open, too.) If I'm going to be an agent of chaos, the least I can do is try to help. ^_^

[musyc]

YES. This is perfect, thank you so very much! I appreciate it!

And your fic posts are gorgeous. That's a beautiful organization/code.

[vex_verlain]

You're very welcome! (And thank you for the kind compliment! ❤)

CORRECTION (please disregard previous comment thread!)

[vex_verlain]

I just now realized that I failed to code the parentheses to be the correct color (with the code I originally gave you, the parentheses would just be the link color, rather than the normal text color like you'd see in a cut tag). Unfortunately, I can't edit my previous comment, but I've updated the code on CodePen.

Here is the link again: Make <details> tag mimic <cut> tags on Dreamwidth.

If anyone notices any further problems, please drop a comment on my snippet post over at vex_codes.