css - 在 CSS 媒体查询中缩写 h1 文本

Question

我有一个<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>

Answer 1

试试 :before 和 width

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