我正在努力解决一个难题，除了一个重要部分外，我已经解决了大部分问题：
想象一下如果你有 5 个 div。一个标题和 4 个部分 (a - d)。
每个部分都有一个打开/关闭切换，我使用 CSS Checkbox Hack 来切换打开/关闭的值。打开时，一个部分会显示其中的内容，并且按钮切换为“关闭”。单击可隐藏内容并将按钮切换回“打开”。一切都很好。
作为要求的一部分：标题应该以语法正确的形式不断显示哪些部分是打开的：
“所有路段均已关闭”
“A区已开放”
“A 和 C 部分开放” <-- 此处复数很重要。
我主要是一个 javascript 人，这在 javascript 中是一个小问题。问题是？必须是纯CSS。为什么？因为这就是要求。我怀疑我实际上正在接受测试，看看我是否能找到解决问题所需的资源。我这么说是因为这是一个 javascript 开发职位 - 很奇怪他们会在纯 CSS 上测试我，而且这是一个 100% 远程职位。当我以前远程工作时，80% 的工作都是谷歌搜索或 SO，所以我就在这里。;)
我假设解决方案涉及滥用content:属性以及 css计数器甚至多个计数器，但到目前为止，我不知道如何做到这一点。
允许任何标记和任何 CSS，但不允许使用 javascript。还必须是跨浏览器兼容的，但我会对它在 ONE 上开始工作感到满意。
有人能指出我正确的方向吗？
TIA。
编辑：到目前为止我所得到的代码：
input[type='checkbox'] {
visibility: hidden;
}
label:after {
color: blue;
text-decoration: underline;
display: inline;
position: absolute;
right: 10px;
content: 'open';
}
#sectionA:checked ~ label:after {
content: …我正在为 paperjs 指定 Arcs 的方式而苦苦挣扎。我不知道为什么基本上没有什么东西：
var myArc = new Arc(degrees (radians?), center, radius);
因为我无法弄清楚 (from, through, to) 作为 Arc 描述符的优势。
无论如何，有人能告诉我如何画一个圆弧说：从固定中心点以固定半径成 30 度吗？假设中心点是：(cx, cy)，半径为 200。
我不在乎方向，因为我可以在事后旋转它。
TIA。