What are the u$ and u in this class? And where does the 'before" come from when inspected?

[posweyb]

https://www.posweyb.net/ Starting line 60

  <div class="container 75%">
    <div class="row 200%">
      <div class="6u 12u$(medium)">
        <header class="major">
          <h2>Maecenas luctus lectus</h2>
          <p>Perspiciatis doloremque recusandae dolor</p>
        </header>
      </div>
      </section>

What are the “units?” here? u and u$ are clearly different, but when I google them, nothing comes up.
When you inspect the class “row 200%” a ::before appears? How does it do that?

[PaulOB]

@posweyb

What are the “units?” here? u and u$ are clearly different,

They are not units at all they are just part of a classname.

It’s the same as if you had a class that said .warning1,.warning2 {background:red}. The 1 and 2 at the end are not units but just part of the classname. However they may serve the author the purpose of knowing that its the second type of warning class especially when they may have half a dozen versions.

Usually you would say something like:

.final-warning{background-red} 
.first-warning {background:orange}

The strange characters you see in your example are probably part of a template system where the author has inferred certain characteristics to certain characters or to allow for easier automation perhaps on the back end.

The characters they are using are special characters (as are digits that start class names) and therefore the css cannot access them in the normal way and the special characters have to be escaped. Your .6u and .6u$ would need to be called like this from the stylesheet.

.\36 u, .\36 u\24 { styles here...}

This way of styling is only of value to a template system and becomes unreadable for normal people unless they are versed in the system being used. I dislike them but they do have their uses.

@posweyb

When you inspect the class “row 200%” a ::before appears? How does it do that?

The pseudo elements ::before and ::after are used in conjunction with the content property to insert content into the selector associated with it. For example .row::before{} will insert content inside .row but before any other content in that element. As you can guess ::after places content after any content in .row. Both place content inside .row but before or after the content already in place. They are mainly used for decorative purposes or adding content not important to the conversation.

When you inspect the page with devtools you can see the extra element appended do the DOM (document Object Model) although it doesn’t really form part of it.

::before / ::after | CSS-Tricks