使用 CSS 的笔记本电脑和移动设备的不同导航标题

Question

是否可以使用 CSS/Boostrap 将我的导航菜单标题“Lorem Ipsum Dolor Sit Amet”（笔记本电脑屏幕）更改为“LIDSA”（手机屏幕）？我该怎么做？谢谢！

下面是例子：

Laptop ScreenMobile Screen

Answer 1

是的，你可以，使用带有content 和attr() 函数的伪类：

全屏查看并尝试缩小窗口宽度

[data-full]::before {
  content: attr(data-full);
}

@media only screen and (max-width: 520px) {
  [data-short]::before {
    content: attr(data-short);
  }
}

<a href="#" data-full="Lorem Ipsum Dolor Sit Amet" data-short="LIDSA"></a>