Meiner Ansicht nach haben Sie ein CSS-Klassenfeld, nach und vor dem Selektor haben Sie die Hintergrundfarbe der Eigenschaft.

Ich muss die Klasse wie "Box rot" oder "Box grün" verwenden und die Farbe nach oder vor dem Selektor ändern.

Das folgende Code-Snippet enthält nicht mein vollständiges CSS. Ich verstecke einen Transformationscode für nach und vor Selektoren.

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}
<div class="box red">Box 1</div>
<div class="box green">Box 2</div>
-1
Anand Jose 18 Apr. 2018 im 09:58

4 Antworten

Beste Antwort
.box.green:before, .box.green:after {
  background: green;
}
.box.red:after, .box.red:before {
  background: red;
}
1
Nitin Parmar 18 Apr. 2018 im 07:02

Sie können dies versuchen, indem Sie den Hintergrund auf .box.red:before oder .box.red:after anwenden

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}
/*Added**/
.box.green:after ,.box.green:before {
    background: green;
}
.box.red:after,.box.red:before {
    background: red;
}
<div class="box red">Box 1</div>
<div class="box green">Box 2</div>
1
Athul 18 Apr. 2018 im 07:03

Ich habe die Frage nicht verstanden, aber nach meinem Verständnis scheint es eine sehr grundlegende Frage zu sein:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}

.red:after , .red:before {
content: '';
 background-color: red;

}
.box.green:before, .box.green:after {
  background: green;
}
</style>
<body ng-app="">

Show HTML: <input type="checkbox" ng-model="myVar">

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>

</body>
</html>
1
Sohan 18 Apr. 2018 im 07:10

Sie sollten wie folgt .box.red: after {} oder .box.green: after {} verwenden und Ihr Snippet sollte sein:

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding:14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: top;
  line-height: 12px;
}

.box:before {
  top: 0;
  // some other line here
  border-top-left-radius: 3px;
}
.box:after {
  top: 50%;
  // some other line here
  border-bottom-left-radius: 3px;
}
.box:after, .box:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #434c51;
}
.box.red:before,.box.red:after { background:red}
.box.green:before,.box.green:after { background:#5FBA7D}
<!--- or you can use after as you need -->
<div class="box red">Box 1</div>
<div class="box green">Box 2</div>
1
fraweb 13 Mai 2018 im 15:18