CODEWITHSUNDEEP
htmlcsswebsass
RRR
RRR

Reputation: 509

web-design: WHY doesn't :before scss work nested inside li unless I put it seperated?

okay I have an rtl website. there is a ul with many li. the first words in each li are ltr a links. What I wanted to do was simple. I want to have a frontAwesome icon before each li so I did the code normally

html 

<ul class="vocab">
    <li>CPU(central processing unit).: وحدة المعالجة المركزية</li>
    <li><a href="" class="ltr">CPU(central processing unit).</a>: وحدة المعالجة المركزية</li>
    <li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
    <li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
    <li><a href="">CPU(central processing unit)</a>: وحدة المعالجة المركزية</li>
    <li><span class="ltr">left ...</span></li>
</ul>

This is the scss

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  direction: rtl;
}
.ltr {
  direction: ltr;
  display: inline-block;
}
.vocab{
  list-style: none;
  width: 70%;
  border-right: 3px solid rgba(77, 181, 56, 1);
  background-color: rgba(77, 181, 56, .1);
  padding: $p;
  margin: 0 auto;
  padding-right: 2 * $h1;
  li {
      padding-right: $h1;
      :before{
              content: "\f137";
              font-family: FontAwesome;
              display: inline-block;
              margin-right: -$h1;
              width: $h1;
      }
  }
  }

four problems happened ..

  1. I made some li with only text (no links). the ones with no link have no icon before them(unless I put them in a span).
  2. and for some reason, if li has a links at the beginning, the icons became links?
  3. as another test for my algorithm to have a ltr text between rtl. I made some without this class. the ones without ltr class worked great in terms of position. HOWEVER, the one with this class had its icon between the text ( I assume it's due to my way of putting the icon ). 4.the last thing is the text written directly into li has no icon.

here is the output: output without solution solved

my solution is a bit weird. and it is what I need an explanation of HOW DID IT WORK?

what I did .. I made ONE change in my scss.. I made :before into li:before and didn't nest it

.vocab{
  list-style: none;
  width: 70%;
  border-right: 3px solid rgba(77, 181, 56, 1);
  background-color: rgba(77, 181, 56, .1);
  padding: $p;
  margin: 0 auto;
  padding-right: 2 * $h1;
  li {
      padding-right: $h1;

  }
  li:before{
          content: "\f137";
          font-family: FontAwesome;
          display: inline-block;
          margin-right: -$h1;
          width: $h1;
  }
}

the output solved

to sum up .. when I made :before nested inside li which is nested in .vocab .. it didn't work and actually gave up some weird output BUT, when I made li:before nested inside .vocab (not :before nested with li) it worked WHY? isn't it basically the same thing???

Upvotes: 1

Views: 58

Answers (2)

Enrico Cassinelli
Enrico Cassinelli

Reputation: 55

As pointed out by Qunetin, the correct syntax is

.li {
  &::before {
    //stuff
  }
 }

But also remember that the correct syntax for pseudoelements is the double colon (::before). The single colon (:hover) is used for pseudoclasses

Upvotes: -1

Quentin
Quentin

Reputation: 943981

The SCSS:

li {
    :before {
         foo: bar
    }
}

represents the CSS:

li :before { foo: bar }

The space is a descendant combinator.

You are trying to get:

li:before { foo: bar }

i.e. "Before the li" and not "Before each of the li's descendents".

You can use an ampersand to supress the descendent combinator:

li {
    &:before {
         foo: bar
    }
}

Upvotes: 4

Related Questions