Html 如何使用@media修改动画

我有一个动画，它在手机上显示正确，但在桌面上显示不正确。它在桌面上太宽了（应该和联系人表单一样宽），而且这个css不会纠正

@media (max-width: 5000px) and (min-width: 768px) 
{.contact::before.contact::after {content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%; 
}} 

为什么不呢？尽管在一个查询下有多个div，但我的css检查器不会挑战它，所以理论上它应该可以工作

如果我改变

宽度：100%

到

width:50%

在设置的级联中，它确实起作用，但这当然意味着整个事情都被改变了，这将使

width:50%

对于移动设备来说太小

html是：

<div class="contact" data
text="CONTACT">CONTACT</div>

---

.contact:：before.contact:：after

是一个无效的选择器，如果要同时处理：：before和：：after，则需要这样编写： 进一步解释：原始选择器本身并不是无效的，它只是不计算任何可能存在的元素。这意味着选择一个after元素，该元素的类为contact，即contact元素的：：before。由于前后不能有类，所以所提到的选择器永远不能解析任何网页上的任何内容。要选择两个单独的元素，需要使用

，

将它们分开：

.contact::before, .contact::after {
  /*here is your css*/
 }

---

我能看看你的整个HTML吗？你需要用逗号分隔多个选择器。@Bugsys先生。谢谢给了你一张赞成票，成功了。你怎么知道这些东西的？明亮的我认为你是正确的，投了赞成票。谢谢你抽出时间。

.contact::before, .contact::after {
  /*here is your css*/
 }