change anchor tag value via css-CodePudding

I have this code in html:

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

via css, I am trying to change where it says Media

I have tried this so far:

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

but what happens is it just adds My Media instead of replacing Media. Please see the tested code below:

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

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

I'm not sure how to fix this. Could someone please share their ideas? Thanks

CodePudding user response：

This is expected behavior. CSS can't replace the HTML content of an element. By using the ::before selector you can add a pseudo element to the page but its generally bad practice to use it for content as screen readers don't always pick up on it.

If you have an accessible usecase where you'd want your anchor tag to display the word "Media" to screen readers and something else ivisually you could add a <span> into your anchor tag and then visually hide it.

#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;
}

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

As noted in the comments above, if you want to truly replace content on the page, you'd need to use JS instead of CSS.

CodePudding user response：

Whatever you are doing is almost correct. You just need to put your original text in span with some classname. Hide that original-text span if its under #user-media.

See the Snippet below, I have created 2 example. One with user-media another with different id.

#media-personal-li a#user-media::before {
    content: "My Media ";
    display: inline;
}
#media-personal-li a#user-media span.original-text {
  display: none;
}

<li id="media-personal-li" ><a id="user-media" href="#"><span >Media </span><span>0</span></a></li>
<li id="media-personal-li" ><a id="user-text" href="#"><span >Text </span><span>1</span></a></li>