Html hover:：after和content不'；不工作CSS

我正试图编写一个代码，在移动视图中，“li”flex方向变为列，并且在右侧的悬停处显示一个白色边框，但它不起作用。你能指出我做错了哪一部分吗？或者我在代码中输入的悬停选项中的哪一个是正确的，我仍然无法理解“后”和“前”的含义。 谢谢你的帮助

@media only screen and (max-width: 576px) { 
  ul {
     width:100%;
    flex-direction: column;
      
  } 
  .hover{
    border-radius: 5px 0 0 5px;
    height: 40px;
    width: 5px;
    background-color: #fff;
    position: absolute;
  }
  .hover::after{
    content: "(border-radius: 5px 0 0 5px;
    height: 40px;
    width: 5px;
    background-color: #fff;
    position: absolute;)";
  }
}

我还添加了

在移动设备上，悬停不起作用（除非按下），因为没有鼠标。（或者您只是调整了屏幕大小，仍然使用鼠标）

根据你写的，你有一个叫做hover的类。 如果要使用悬停，请尝试：hover“而不是“.hover”

例如：

li:hover:：after{
内容：“测试”；
}

这显然是错误的

内容：“（边框半径：5px 0 0 5px；

谢谢。我应该如何使用内容？我应该将其留空吗？