Home > Blockchain >  Change link text using CSS
Change link text using CSS

Time:09-11

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 >
  <a href="https://url/to/user_1/certificates" data-slug:"https://url/to/user_1/certificates">
    <i >
      ::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?

CodePudding user response:

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

CodePudding user response:

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

1. First you'll need to identify the  that the plugin's stylesheets were originally enqueued under. You can do this quickly by running a search on your web server in the plugin's directory or you can check through browser console.
  1. 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 );

  2. In your custom_style you can write whatever css code you have written and override the property of class.

  • Related