Question

我在主页上有一个关闭灯箱的按钮。

它的文字说＆＃39;关闭＆＃39;它是对齐的。但是，当视口宽度低于400像素时，它可能与标题文本重叠。

所以我想用一个＆＃39; X＆＃39;使用媒体查询。

我试过了.button:before但是我无法摆脱原来的“关闭”。以这种方式发短信。

如何只使用CSS实现这一目标？

Answer 1

使用伪元素:before设置按钮的值也是默认值“关闭”。这是一个例子：

<强> HTML

<span class="button" title="Close"></span>

<强> CSS

.button:before {
    content: 'Close';
}

@media screen and (max-width: 200px) {
    .button:before {
        content: 'X';
    }
}

<强>演示

Try before buy

Answer 2

<a><span class="mob-view">X</span><span class="normal-view">close</span>

使用媒体查询显示：

.mob-view {
    display:block;
}
.normal-view {
    display:none;
}

Answer 3

考虑你的按钮：

<button>Close</button>

现在让我们用'X'代替'Close'：

在媒体查询中设置以下CSS：

button {
    visibility: hidden;
}

button:after {
    content:'X'; 
    visibility:visible;
}

试试这个http://jsfiddle.net/ZBj2m/685/

希望这对你有用

Answer 4

试试这个：

<强> HTML：

<div id="lightBox">
    <h1>Heading Goes Here</h1>
    <button id="close">Close</button>
</div>

<强> CSS

#lightBox{
    width:100%;
    height:100%;
    background:grey;
    position:relative;
}
#close{
    position:absolute;
    right:5px;
    bottom:5px;
    border:none;
    padding:5px;
    height:25px
}
@media screen and (max-width:360px){
    #close{
        top:-10px !important;
        right:-10px !important;
        width:25px; 
        border-radius:25px;
        height:25px;
        text-indent:-99px;
        background-color:red;
    }
    #close:before{
        content:'X';
        text-indent: -14px;
        color: white;
        float: right;
    }
}

演示Fiddle

根据视口宽度更改按钮文本

4 个答案: