CSS 适用于 codepen 但不适用于浏览器的本地文件

Question

我正在尝试实现此处显示的捐赠按钮：https://codepen.io/jvalle/pen/ImCtq

CSS看起来很简单，不需要JavaScript。我查看了源代码并确保引用了完全相同的 font awesome 版本。

当我在本地运行以下代码时，（在所有主流浏览器的最新版本中）我得到一个没有鼠标悬停动画和心形图标的按钮。

我已将所有内容作为片段附上，但为了更加清楚起见，我在本地使用的代码（css 在 donate.css 中）是：

<!doctype html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="donate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">

<title></title>

</head>

<body>
<a href="#" class="donate">DONATE</a>

</body>

</html>

body {
  font: 20px "Helvetica";
}

a {  
  display: inline-block;
  margin: 20px;
  position: relative;
  text-decoration: none;
}

.donate {
  background: #00684d;
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.4) 100%),
              -webkit-linear-gradient(left, lighten(#00684d, 15%) 0%, #00684d 50%, lighten(#00684d, 15%) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%),
              linear-gradient(to right, lighten(#00684d, 15%) 0%, #00684d 50%, lighten(#00684d, 15%) 100%);
  background-position: 0 0;
  background-size: 200% 100%;
  border-radius: 4px;
  color: #fff;
  padding: 15px 65px 15px 15px;
  text-shadow: 1px 1px 5px #666;
  -webkit-transition: all 800ms;
  transition: all 800ms;
  
  &:after {
    border-left: 1px solid darken(#00684d, 5%);
    color: darken(#00684d, 10%);
    content: "\f004";
    font: 20px "FontAwesome";
    padding: 10px 0;
    padding-left: 15px;
    position: absolute;
    right: 16px;
    top: 7px;    
    -webkit-transition: all 600ms 200ms;
    transition: all 600ms 200ms;
  }
  
  &:hover {
    background-position: -100% 0;
    
    &:after {
      border-left: 1px solid lighten(#00684d, 5%);
      color: #fff;
      text-shadow: 0 0 10px #000;
    }
  }
}

<!doctype html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">

<title></title>

</head>

<body>
<a href="#" class="donate">DONATE</a>

</body>

</html>

即使在代码片段中，在 codepen 上看到的结果似乎也没有被复制。

为什么会这样？ CSS 不依赖任何东西，并且引用了相同版本的 font-awesome。尽管我很想解决这个问题，但为了我自己的理解，了解导致问题的原因很重要。

Answer 1

将 LESS 代码编译为 CSS，此处示例：http://lesscss.org/less-preview/

CSS 适用于 codepen 但不适用于浏览器的本地文件

CSS works on codepen but not in local file in browser

html

css

font-awesome

codepen