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

Question

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 ..

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).
and for some reason, if li has a links at the beginning, the icons became links?
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???

Because a nested :before within a li means something different than a li:before. You will figure it out when you look at the output CSS. — Mr. Hugo, Oct 17 '17 at 18:09

score 4 · Accepted Answer · answered Oct 17 '17 at 18:07

4

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
    }
}

answered Oct 17 '17 at 18:07

Quentin

914,110
126
1,211
1,335

aha! this does make sense. Thank you! – RRR Oct 17 '17 at 18:08

score -1 · Answer 2 · answered Oct 22 '17 at 09:04

-1

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

answered Oct 22 '17 at 09:04

Enrico Cassinelli

53
1
8

Why the downvote? Did I say something which was not correct? – Enrico Cassinelli Oct 22 '17 at 09:12
Both answers are correct, but if you need support for IE8 and lower you will need the single colon. https://stackoverflow.com/questions/2546251/how-can-i-get-ie8-to-accept-a-css-before-tag#10192339 – StefanJanssen Oct 22 '17 at 10:52

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

2 Answers2