content: "#702f8a -> #560079 @ 90° 在 CSS 中做了什么答案

【问题标题】：What does content: "#702f8a -> #560079 @ 90° do in CSScontent: "#702f8a -> #560079 @ 90° 在 CSS 中做了什么
【发布时间】：2016-06-09 01:38:53
【问题描述】：

我确实尝试了很多谷歌，但无法弄清楚这个 css 是做什么的。

请你帮忙。

.XXX-purple-gradient:after {
    content: "#702f8a -> #560079 @ 90┬░"
}

另外，compass 编译 Sass 时，会将 90° 转换为 90┬░。这会导致任何问题吗？

谢谢！

【问题讨论】：

抱歉，我想我并不清楚我在问什么。我了解 CSS 属性内容的作用，但只是不明白他们为什么这样做，因为显然他们正在实际页面上显示 CSS 样式。
嗯，谢谢你，但对我来说，这并没有回答我的问题，因为它没有解释人们为什么这样做，它的商业目的是什么。我感谢您在技术部分的详细回答，但至于实际问题，它并没有解决我的难题。对此感到抱歉。

标签： css

【解决方案1】：

无论你使用"deg"版本还是"°"，结果都是一样的。

Css 选择器是一个类选择器，它应用在双引号 after 元素中提供的 content。它基本上附加了"#702f8a -> #560079 @ 90°"。我建议查看here 描述的伪选择器。

这是它的渲染方式：

.container {
  background-color: red;
  border: 2px solid purple;
}
.container:after {
  content: "#702f8a -> #560079 @ 90°"
}
.well {
  background-color: yellow;
  border: 2px solid orange;
}
.well:after {
  content: "#702f8a -> #560079 @ 90deg"
}

<div class="container">
  <h1>Hello</h1>
  <div class="well">
    <h1> World</h1>
  </div>
</div>

【讨论】：

【解决方案2】：

我突然明白这是为了什么。它们用于演示目的，每个类都有指定的样式，这部分属性解释了它是什么。通过这种方式，他们可以使用 css 来添加描述。

问题已解决，谢谢！

【讨论】：

【解决方案3】：

你必须使用deg这个词而不是°

.XXX-purple-gradient:after {
    content: "#702f8a -> #560079 @ 90deg
}

【讨论】：