Change link text using CSS

Question

To customize some pages/plugins of a Wordpress page I have to use CSS because the dashboard doesn't allow these changes.

I'm having problems with a specific case. I want to change the text of an item in a list. In this case I want to change the text "Certificates" by "Certificados". The HTML code is this:

<ul>
...
<li class="certificates">
  <a href="https://url/to/user_1/certificates" data-slug:"https://url/to/user_1/certificates">
    <i class="fas fa-certificate">
      ::before
    </i>
    Certificates
    ::after
  </a>
</li>
...
</ul>

In other cases I used something like this to change texts in CSS with success:

.class-to-change {
    visibility: hidden;
}
.class-to-change:after {
    visibility: visible;
    content: "new text";
}

But my list item seems very complex to apply this solution. Could I change the text using CSS in that case?

score 0 · Answer 1 · 2022-09-12T04:53:11.567

There is an option that we can override our custom css with plugin css. These are the steps which fixed your issue.

Then add a dequeue function to the functions.php file, and invoke it on the wp_enqueue_scripts with a priority higher than the priority level set on the plugin's original enqueue function. e.g.
```
 function custom_style() {
      wp_dequeue_style( 'plugin_css' );
     wp_dequeue_style( plugin_css_2' );
     wp_enqueue_style( 'custom-style', get_bloginfo('stylesheet_url') );
 }
```
add_action('wp_enqueue_scripts', 'custom_style', 99 );
In your custom_style you can write whatever css code you have written and override the property of class.

score -1 · Answer 2 · answered Sep 10 '22 at 22:37

-1

You may embed "Certificates" in

html tag. In this way you will have p element nested into li tag. After that you could set its display property to "none" (display: none;) and then might use this code: i::after { content: "new text"; }

answered Sep 10 '22 at 22:37

Andrea

61
6

The problem is that I cannot embed Certificates in html tag because this is code generated by a wordpress plugin, I have no access to this html code. – Wonton Sep 10 '22 at 22:41
That can be problematic. I can't figure out another way, i'm sorry. By the way, I have done a bit of research and I've found a similar question on stackoverflow and I think answers and comments there coul help you the argoument: https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css – Andrea Sep 10 '22 at 22:53
Thanks! This is the StackOverflow question I've been using to replace text in other cases, successfully, but for this case it doesn't seem so simple. – Wonton Sep 10 '22 at 22:59

Change link text using CSS

2 Answers2