Question

我正在尝试创建手风琴链接（扩展手风琴）

我希望文本更改取决于链接是否处于活动状态..例如：

DEFAULT : "View all Comments"
ACTIVE : "Hide Comments"

我知道我可以使用CSS来设置内容颜色，样式等的样式，但是想知道是否有一种方法可以更改链接中依赖于活动链接的实际文本。

Answer 1

.accordion-item::before { /* default text of the accordion item */
  content : "View all comment";
}

.accordion-item:focus:before { /* triggered when the accordion item is clicked/focused */
  content : "Hide Comments";
}

<a href="#" class="accordion-item"></a>

以下是如何执行此操作的示例，假设您将有多个链接代表每个手风琴项目。

请注意，您可以使用新的HTML data-*属性来实现自动化流程，以防您在通过 Php <等语言进行语言解释之前生成HTML / em>或 JavaScript 如下：

Answer 2

你可以使用像这样的伪元素

<a class="toggleText"></a>

CSS：

.toggleText::after
{
    content:"View all Comments";
}
.toggleText:active::after
{
    content:"Hide Comments";
}

您希望支持的旧浏览器可能不支持psuedo元素。

点击此处查看支持：http://caniuse.com/#search=%3A%3Aafter

和内容：http://caniuse.com/#search=CSS%20Generated%20content%20for%20pseudo-elements

CSS - 活动链接更改文本

2 个答案: