Question

我正在使用以下HTML代码：

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr:after {
  background: #fff;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="hr.css">
</head>

<body>
  <p>§1: The first rule of Fight Club is: You do not talk about Fight Club.
  </p>
  <hr>
  <p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
</body>

</html>

应该发生的是，两个句子之间应该出现两个水平线，中间是一个卷曲的形状。

正在发生的是，仅出现了一条常规的单水平尺。

这是怎么回事？

谢谢！

Answer 1

您的代码段显示了您喜欢的结果，也许在您的工作环境中您有样式的缓存版本？

从本质上讲，这意味着您的浏览器正在加载旧版本的代码，您将需要强制其加载新版本，才能在Google Chrome中执行此操作，并使用right click > inspect打开开发人员工具，然后然后在刷新按钮上按住鼠标按钮，直到出现下拉菜单。

在这样做时，请尝试选择选项Empty Cache and Hard Reload

出现HR标签，但没有样式可能

1 个答案: