css - 在CSS Media Query中缩写h1文本

我有一个<h1>元素，其文本为“ WHERE LIONS ROAM”（我的网站名称，您可以在这里看到：http://www.wherelionsroam.co.uk）。对于移动尺寸的设备，我如何将文本缩短为“ WLR”。我有一个这样的预先存在的媒体查询（我尝试过使用它，但似乎无法完全正确）：

    <style>
    @media screen and (max-width: 650px) {
    #wlr {
    display:none;
}
    #wlr:after {
    content: 'WLR';
}
    } /* end of media query block */
    </style>

最佳答案

尝试一下：before和width

h1 {width:0;height:1em;overflow:hidden;padding-right:2.5em}
h1:before {content:'WLR';padding:0 2px;}