Problems replacing "Read More" text

Question

I have this text in my blog (custom template):

and I would like to replace it with something different on my language.

This is how it looks when inspecting it:

<span class="bt_readmore_btn_holder">
  <span class="bt_readmore_btn">
      ::before
      "Read More"
      ::after
  </span>
</span>

bt_readmore_btn's CSS:

.bt_readmore_btn_holder { padding-left:10px; padding:0px 10px; display:block; margin-top:20px; font-size:17px;}
.bt_readmore_btn { color:$(maincolor); text-decoration:none;    display:inline-block;  position:relative}
.bt_readmore_btn:hover { color:$(linkcolor); text-decoration:none;}
.bt_blog_post_cat a:before, .bt_readmore_btn:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    transition: width 0s ease, background .2s ease;

    }
.bt_blog_post_cat a:after, .bt_readmore_btn:after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: $(linkcolor);
    transition: width .2s ease;
}

.bt_blog_post_cat a:hover:before, .bt_readmore_btn:hover:before {
    width: 100%;
    background: $(linkcolor);
    transition: width .5s ease;
}
.bt_blog_post_cat a:hover:after, .bt_readmore_btn:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

So far I tried...

Doing this but there's no such element in my template.
Looking for the <span> element where the "Read More" appears but can not find it (which seems a bit odd to me).
Adding this CSS (nothing changed):

.bt_readmore_btn:before { display: none; }

.bt_readmore_btn:after { content: "Read even more"; }

Any idea?

I'm guessing you are using WordPress? Wordpress generates it dynamically. You cannot change the content of a tag using CSS, so you either have to keep looking in the templates, or use jQuery. — CalvT, Feb 09 '17 at 11:28
Ok, but my comment still stands, you cannot change the content of a tag using CSS. You can only change the *look* - as this is what CSS is for. — CalvT, Feb 09 '17 at 11:31
@CalvT you can alter tag's content by aplying the CSS from the last paragraph. You can give it a try and will see. — sysfiend, Feb 09 '17 at 11:33
If you mean the `:after` and `:before`, that **does not** edit the content of a tag. It adds content either *before* or *after* the tag, hence the names. — CalvT, Feb 09 '17 at 11:35
`display: none` remove whatever it is inside the tag and then, with `content` you tell it what to show — sysfiend, Feb 09 '17 at 11:36
::before and ::after still exist within the element. Display none will hide all of it. — rlemon, Feb 09 '17 at 11:38
@rlemon true, and that was the problem, just found out by re-reading [this answer](http://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css) — sysfiend, Feb 09 '17 at 11:39

score 0 · Answer 1 · answered Feb 09 '17 at 11:43

Thanks to the comments, I realized my mistake. The CSS I was using in order to change it:

.bt_readmore_btn:before { display: none; }
.bt_readmore_btn:after { content: "Read even more"; }

was wrong. By doing this:

.bt_readmore_btn { display: none; }
.bt_readmore_btn_holder:after { content: "Read even more"; }

it works just fine.

Problems replacing "Read More" text

1 Answers1