1

I really tried google a lot but couldn't figure out what does this css do.

Could you help please.

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

Also when compass compile the Sass, it converts 90° to 90┬░. Is this going to cause any issues?

Thanks!

zhanke
  • 671
  • 7
  • 25
  • Sorry I think I was not clear what I was asking. I understand what does the CSS attribute content do, but just don't understand why they do this, because obviously they are displaying CSS styling on the actual page. – zhanke Mar 01 '16 at 22:42
  • Umm, thank you but to me, that didn't answer my question, because it doesn't explain why people do that, what's the business purpose of it. I thank you for your detailed answers on the technical part, but as for the actual question, it didn't address my puzzle. Sorry about that. – zhanke Mar 01 '16 at 22:59

3 Answers3

2

Whether you use the "deg" version or the "°", the result is the same.

The Css selector is a class selector, that applies the content provided in the double quotes after the element. It basically appends "#702f8a -> #560079 @ 90°". I suggest looking into the pseudo-selectors described here.

Here is how it renders:

.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>
Community
  • 1
  • 1
David Pine
  • 23,787
  • 10
  • 79
  • 107
0

you have to use the word deg instead of °

.XXX-purple-gradient:after {
    content: "#702f8a -> #560079 @ 90deg
}
Sanova
  • 551
  • 3
  • 10
0

I suddenly understood what was this for. They are for demo purposes, every class has a style assigned, and this part of attributes explain what it is. By doing this way, they can use css to add the descriptions.

Problem resolved, thanks!

zhanke
  • 671
  • 7
  • 25