How to replace a a
element only with CSS (other methods won't work)

Question

I looked at this question, but it didn't work for me.

Here is a picture of the situation:

I want to replace the text "Select subscription plan" with "All plans comes with a 7-day free trial." And I almost accomplished this using the following CSS:

.discourse-subscriptions-section-columns .section-column div > p:after {
content: "All plans come with a 7-day free trial!"; }

But then original text still remains, and if I use

.discourse-subscriptions-section-columns .section-column div > p {
visibility: hidden; }

then EVERYTHING disappears, not just the "Select subscription plan" part. Hence, I am not sure what to do to get this to work...

That's a weird question. Watch out for browser compatibility — Raptor, Mar 01 '21 at 05:51

score 2 · Accepted Answer · answered Mar 01 '21 at 02:14

2

You need to make sure the font-size of the parent is 0px so the :after can replace it. This will avoid using absolute positioning and make the text naturally fit in.

p{
    font-size: 0px;
    visibility: hidden;
}

p:after{
    content: "All plans come with a 7-day free trial!";
    position: relative;
    visibility: visible;
    font-size: 20px;
}

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia, optio?</p>

answered Mar 01 '21 at 02:14

Diego Fortes

8,830
3
32
42

Nice! This works... Mostly at least. It replaces the text, but now there is barely a gap between this text and the buttons, so it looks kind of weird. How can I get the correct spacing back, to where there is a one-line gap between the
and the buttons?
– Wesley Mar 01 '21 at 02:49
It's difficult to guide you without taking a look at it. Can you share the website link? – Diego Fortes Mar 01 '21 at 07:13

How to replace a a element only with CSS (other methods won't work)

1 Answers1

How to replace a a
element only with CSS (other methods won't work)