html - 使用 CSS 向移动版本的文本添加字符

Question

我的网站上有一个文本 block :

Specialtyreagents

<h1>Specialtyreagents</h1>

我能以某种方式在 CSS 中的这个 block 中添加一个 - 符号吗，所以它应该看起来像这样:

Specialty-reagents

在我的案例中我只能使用 CSS!

感谢您的帮助。

Answer 1

在移动设备上使用带有你想要的单词的伪元素，并使用 font-size 来隐藏或显示它。

示例

codepen

h1:after {
  content: 'Specialty-reagents';
  font-size: 0;
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 0;
  }
  h1:after {
    font-size: 32px;
  }
}

<h1>Specialtyreagents</h1>