仅显示/隐藏褪色文本css

Question

我想如下显示/隐藏段落的一部分：

1. 开始看起来像这样：

   ►这是带有淡入淡出文字的段落的开头

2. 单击左侧的“插入符号”，看起来像这样：

   ▼这是段落的开头，其中褪色文本不再褪色，其余内容显示。

3. 单击向下的“插入符号”，它返回到：

   ►这是带有淡入淡出文字的段落的开头

我认为这可能会起作用吗？

<div class="partial-text"><a href="">&#9658; This is the start of the paragraph with <style=”fadingCSS”> fading text</style></a></div>

<div class="full-text"><a href="">&#x25BC; This is the start of the paragraph with fading text no longer fading and the rest of the content shown.</a></div>

我需要帮助的CSS

1. 显示/隐藏适当的div
2. 删除所有链接格式
3. 渐变样式CSS

我看过以下内容，但不能将它们拼凑在一起：

• How to style the arrow of <details> <summary> elements?
• Fading out text on overflow with css if the text is bigger than allowed

这超出了我的能力，因此，如果有人愿意提供帮助，将不胜感激！

Answer 1

<details>标记不是结构化的HTML元素，所以我认为hack想要使用它实际上是不可能的。

Here's an implementation使用复选框和兄弟选择器，其缺点之一是，您必须定义摘要和完整段落。不过，我不建议这样做或类似的[[仅CSS]]应用程序。它们不是很可扩展，依赖于特定的HTML结构，如果没有很好的文档说明，它们很难理解。