別クラスが存在するならタグの前に線が引きたいが出ない

発生している問題・エラーメッセージ

アクティブでで線が表示されない

該当のソースコード

.foo
  div ようこそ！ぷっちょワールドへ！ 
  
.foo.active
  div ようこそ！ぷっちょワールドへ！ 

.foo {
  padding: 50px;
  &:before {
    content: "";
    border-top: 3px solid #959;
    width: 50%;
    transform: translateY(-10px);
  }

  &:before.active {
    border: 3px solid #ff0;
  }
}

試したこと

ここに問題に対して試したことを記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

疑似要素は基本的に compound selector の末尾に置かれます (参考)。

<compound-selector> = [ <type-selector>? <subclass-selector>*
[ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

よって、 &:before.active という選択子は &.active:before と修正する必要があります。また、 ::before, ::after 疑似要素は継承不可能なプロパティでは初期値を取ります (参考)。

Tree-abiding pseudo-elements always fit within the box tree. They inherit any inheritable properties from their originating element; non-inheritable properties take their initial values as usual.

そのため、 ::before 疑似要素はインラインレベルの要素となっています。インラインレベルの要素に width プロパティは影響を及ぼさないため、 width プロパティを動作させるには display プロパティを inline-block, block などの値へ変更する必要があります。

以上の二点の修正を行うと、最終的なコードは以下のようになり、これは質問者さんの想定した動作になっていると思います (動作確認用リンク)。

Pug
1.foo
2  div ようこそ！ぷっちょワールドへ！ 
3  
4.foo.active
5  div ようこそ！ぷっちょワールドへ！

SCSS
1.foo {
2  padding: 50px;
3  &:before {
4    display: block;
5    content: "";
6    border-top: 3px solid #959;
7    width: 50%;
8    transform: translateY(-10px);
9  }
10
11  &.active:before {
12    border: 3px solid #ff0;
13  }
14}