通过 css 更改锚标记值答案

【问题标题】：change anchor tag value via css通过 css 更改锚标记值
【发布时间】：2023-01-14 05:28:06
【问题描述】：

我在html中有这段代码：

<li id="media-personal-li" class="current selected"><a id="user-media" href="#">Media <span>0</span></a></li>

通过 css，我正在尝试更改 Media 的位置

到目前为止我已经试过了：

#media-personal-li a#user-media::before {
    content: "My Media";
    display: inline;
}

但发生的是它只是添加My Media而不是替换媒体。请看下面的测试代码：

#media-personal-li a#user-media::before {
    content: "My Media";
    display: inline;
}

&lt;li id="media-personal-li" class="current selected"&gt;&lt;a id="user-media" href="#"&gt;Media &lt;span&gt;0&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

我不确定如何解决这个问题。有人可以分享他们的想法吗？谢谢

【问题讨论】：

你不能用 css 替换内容，你需要 JavaScript
但是我可以隐藏它，然后我就无法弄清楚隐藏后如何添加它。所以你是说即使那样也不可能？
您可以省略“媒体”，然后将 ::before 与其他各种选择器一起使用，以根据其他选择器设置 content: "Media" 或 content: "My Media"。
@StephenP 是的，所以我相信我确实尝试过。我做了`#media-personal-li a#user-media{ display: none }，然后尝试在其中添加新的 css，并将 !important 放在最后，但它什么也没做

标签： html css

【解决方案1】：

这是预期的行为。 CSS 不能替换元素的 HTML 内容。使用 ::before 选择器添加，您可以在页面的位置添加一个伪元素，但是将它用于您希望屏幕阅读器解析的内容通常是不好的做法。

如果您有一个可访问的用例，您希望锚标记向屏幕阅读器显示“媒体”一词，并在伪元素中以可视方式显示其他内容，您可以将 <span> 添加到锚标记，然后以可视方式隐藏它。

    #media-personal-li a#user-media::before {
      content: "My Media";
      display: inline;
    }
    .visually-hidden {
    clip: rect(0 0 0 0); 
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap; 
      width: 1px;
    }

    &lt;li id="media-personal-li" class="current selected"&gt;&lt;a id="user-media" href="#"&gt;&lt;span class="visually-hidden"&gt;Media &lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

【讨论】：