So erstellen Sie einen Inline-Stil mit: before und: after

74

Ich habe ein Bubble-Chat-Ding von http://www.ilikepixels.co.uk/drop/bubbler/ generiert.

Auf meiner Seite habe ich eine Nummer eingefügt

.bubble {
  position: relative;
  width: 20px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #FFF;
   display: block;
  width: 0;
  z-index: 1;
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}

Ich möchte, dass sich die background-colorBlase entsprechend der Anzahl in der Blase ändertrgb

Also, wenn mein Div ist

<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>

Ich möchte, dass die Farbe ist rgb(100,255,255)

Die Sache ist, dass dies das Dreieck nicht beeinflusst.

Wie schreibe ich das Inline-CSS, damit es Folgendes enthält: Vorher und: Nachher?

Nick Ginanto
quelle

Antworten:

58

Das kannst du nicht. Mit Inline-Stilen zielen Sie direkt auf das Element. Sie können dort keine anderen Selektoren verwenden.

Sie können jedoch verschiedene Klassen in Ihrem Stylesheet definieren, die unterschiedliche Farben definieren, und dann die Klasse zum Element hinzufügen.

Jan Hančič
quelle
Kann ich es mit Javascript machen?
Nick Ginanto
4
Anscheinend ja: stackoverflow.com/questions/7330355/…
Jan Hančič
@ NickGinanto sicher, dass Sie können - es wird einfach nicht funktionieren: D Wenn Sie hier mit Browser-Interna kämpfen, können Sie das Weel nicht mit einer Sprache neu erfinden, die darauf liegt ...
jebbie
55

Sie können CSS-Variablen verwenden (genauer gesagt, benutzerdefinierte CSS-Eigenschaften).

  • Legen Sie Ihre Variable in Ihrem Stilattribut fest: style="--my-color-var: orange;"
  • Verwenden Sie die Variable in Ihrem Stylesheet: background-color: var(--my-color-var);

Browser-Kompatibilität

Minimales Beispiel:

div {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}

div:after {
  background-color: var(--my-color-var);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
<div style="--my-color-var: orange;"></div>

Ihr Beispiel:

.bubble {
  position: relative;
  width: 30px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  background-color: var(--bubble-color);
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent var(--bubble-color);
   display: block;
  width: 0;
  z-index: 1;
  
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>

Nathan Arthur
quelle
2
Zum ersten Mal verwende ich CSS-Variablen und es funktioniert wie ein Zauber. Vielen Dank!
Amjad Abu Saa
1
Ich wusste nicht, dass das eine Sache ist. Es ist großartig.
Mote Zart
2
Leider nicht vom Internet Explorer unterstützt
horstwilhelm
Ja, wenn Sie IE unterstützen müssen, sollten Sie benutzerdefinierte Eigenschaften auf Anwendungsfälle beschränken, die die Website-Funktionalität für IE-Benutzer nicht beeinträchtigen. Verwenden Sie mit anderen Worten die progressive Verbesserung.
Nathan Arthur
49

Der Schlüssel ist für background-color: inherit;das Pseudoelement zu verwenden.
Siehe: http://jsfiddle.net/EdUmc/

BigMacAttack
quelle
1
gute Antwort. Vererbung kann sehr, sehr praktisch sein bei: Wenn Sie Dinge wie Pfeile aus Rändern mit übergeordneten Farben wollen ...
Jay Edwards
12

Wenn Sie es wirklich inline benötigen, beispielsweise weil Sie einige benutzerdefinierte Farben dynamisch laden, können Sie jederzeit <style>direkt vor Ihrem Inhalt ein Element hinzufügen .

<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>

Beispiel für einen Anwendungsfall mit PHP und einigen (von WordPress inspirierten) Dummy-Funktionen:

<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>

Seit HTML 5.2 ist es gültig, Stilelemente innerhalb des Körpers zu platzieren, obwohl es weiterhin empfohlen wird, Stilelemente im Kopf zu platzieren.

Referenz: https://www.w3.org/TR/html52/document-metadata.html#the-style-element

Jules Colle
quelle
1
tolle Lösung! Es war perfekt für meine Situation (Bedingungen in Flüssigkeit anwenden, die Stile beeinflussen).
Diego Pamio
Betonung auf "wenn Sie es wirklich brauchen"! :)
Jay Edwards
2

Ich habe ein ähnliches Problem durch Rahmenfarbe gelöst : erben

, sehen:

<li style="border-color: <?php echo $hex ?>;">...</li>

li {
    border-width: 0;
}

li:before {
    content: '';
    display: inline-block;
    float: none;
    margin-right: 10px;
    border-width: 4px;
    border-style: solid;
    border-color: inherit;
}
Jiří Chmiel
quelle