Change html Text with conditional css but without js

Question

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.

My question is:

I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button .

Can this be done with CSS only, without any javascript ?

Since some users block javascript, that's why I was looking for a way around...

Thanks a lot.

Answer 1

它无法通过CSS完成您必须为点击事件添加脚本。

Answer 2

I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)

If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:

  #example { position: relative; } #example-checkbox { display: none; } #example-checkbox:checked + #example:after { content: "Hide"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; } 

  <input id="example-checkbox" type="checkbox"> <label for="example-checkbox" id="example">Show</label> 

Reference See css only part.

Hope it will help you.

Answer 3

actually @Vaidya & @Preet it is possible via css only :

https://css-tricks.com/swapping-out-text-five-different-ways/

@fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.

I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.

I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.