響應地更改<button>元素的文本

Question

我想知道是否可以通過css在屏幕大小低於400px時更改按鈕的文本。現在我有類似<button>Next</button>的東西，我想將其更改爲<button>-></button>。那可能嗎？

Answer 1

HTML

<button id="button-one" name="button">NEXT</button> 
<button id="button-two" name="button">-&gt;</button> 

CSS

#button-two { display: none; } 

@media (max-width: 400px) { 
    #button-one { display: none; } 
    #button-two { display: inline; } 
} 

DEMO：http://jsfiddle.net/ujag5eya/1/

Answer 2

另一個可選的方法是使用CSS content一個例子是

HTML

<button id="button-one" name="button"></button> 

CSS

Codepen http://codepen.io/noobskie/pen/ojgOWB

這裏的文章克里斯Coyier誰解釋得很好

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