Pseudoelement als Inline Code

[Killua]

Hallo!

Stehe grade am Schlauch bei einer sicher einfachen Sache. Möchte bloß sowas wie before content als Inline Style schreiben - bloß wie?

Also es soll z.B. einer Überschrift ein Symbol, (z.B ein Copyright Zeichen, ein Info-Symbol, Warnsymbol, irgendwas halt) vorangestellt werden:

<h3 style="???">Überschrift</h3>

Als externe Anweisung in einem Style Block kein Problem, aber keine Ahnung wie man das mit before, content usw. als Inline Code schreibt.

[Matthias Scharwies]

Servus!

Hallo!

Stehe grade am Schlauch bei einer sicher einfachen Sache. Möchte bloß sowas wie before content als Inline Style schreiben - bloß wie?

Also es soll z.B. einer Überschrift ein Symbol, (z.B ein Copyright Zeichen, ein Info-Symbol, Warnsymbol, irgendwas halt) vorangestellt werden:

<h3 style="???">Überschrift</h3>

Als externe Anweisung in einem Style Block kein Problem, aber keine Ahnung wie man das mit before, content usw. als Inline Code schreibt.

nicht als Inline-Code - mach es im Stylesheet:

CSS/Tutorials/Selektoren/Pseudoelement#::before_und_::after

Herzliche Grüße

Matthias Scharwies

--

[Killua]

Ja, also gehts nicht anders, hm. Ist da nur nicht einfach weil Class und ID von einem WP Plugin bestimmt werden und das recht dominant.

So, geht - Zusatzfrage: Wie mache ich ein Leerzeichen rein?

So schauts CSS aus:

.cvtermheading.copy a::before { content: "\A9"; }

HTML:

<h3 id="123abc456" class="cvtermheading copy"><a>Blabla</a></h3>

Gibt ©Blabla aus. Sollte aber ein Leerzeichen nach dem © sein ...

[Gunnar Bittersmann]

@@Killua

.cvtermheading.copy a::before { content: "\A9"; }
Gibt ©Blabla aus. Sollte aber ein Leerzeichen nach dem © sein ...

.cvtermheading.copy a::before { content: "\A9 "; } – zwei Leerzeichen.

Besser: nicht escapen: .cvtermheading.copy a::before { content: "© "; }

🖖 Живіть довго і процвітайте

[Killua]

.cvtermheading.copy a::before { content: "\A9 "; } – zwei Leerzeichen.

Besser: nicht escapen: .cvtermheading.copy a::before { content: "© "; }

Ich schaffs nicht. Bestimmte Zeichen sind kein Problem, da brauchts weder \ noch irgendwas. Wie etwa das "* ", das geht immer, auch mit Leerzeichen. Doch "meine" Symbole nicht.

Und noch dazu finde ich auch nicht die Symbole die ich will usw. Weiß nicht wie man solche von da in Hex umrechnet und direkt reinkopieren geht bei mir auch nicht , ... und und.

Danke mal für heute, aber vllt. klappts am SA, den 14 besser als am FR, den 13 ...

Gute N8 und Danke an alle

[Rolf B]

Hallo Killua,

Im Zweifelsfall erzeugst du das Zeichen einmal per Backslash- Sequenz und kopierst es im Browser nach WordPress. Wenn das nicht geht, ist in deinem wp irgendwas sehr schräg.

Unter Windows solltest du ©️ auch mit Alt+0169 eingeben können. Unter Linux… hm.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Unter Windows solltest du ©️ auch mit Alt+0169 eingeben können.

Wobei die Tasten des Ziffernblocks zu drücken sind.

Unter Linux… hm.

Hat nicht jedes OS eine Zeichentabelle?

🖖 Живіть довго і процвітайте

[Killua]

Backslash- Sequenz

Was ist damit gemeint?

und kopierst es im Browser nach WordPress. Wenn das nicht geht, ist in deinem wp irgendwas sehr schräg.

Also das geht schon, auf mehrere Arten. Aber in dem Fall wird das Zeichen nicht im WP Editor gebraucht, genutzt, sondern in einem Textwidget. Wo es eben einer Überschrift vorangestellt werden soll, daher kann ich es nur per CSS bestimmen. Ja, auch da sollte das reinkopieren eines Zeichens in den CSS Code erhalten bleiben - das geht aber nicht immer.

Unter Windows solltest du ©️ auch mit Alt+0169 eingeben können.

Ja, klar. Das ist die einzige Zeichenkombination die ich auswendig kenne. Weil ich es als Journalist/Fotograf sehr oft brauche.

Doch das hilft mir nix. Nachher kommt ein Karo mit Fragezeichen raus. Also die Unicode Zahl zu Hex und das klappt dann auch:

::before { content: "\A9  "; }

Das Problem mit dem nicht möglichen Leerzeichen ist auch gelöst: Es tritt nur bei bestimmten Zeichen auf. Die meisten halten sich dran, wenn man 2 Leerzeichen (Danke Gunnar!) nimmt.

Ebenso weiß ich jetzt, wie ich das neu gestaltete https://emojipedia.org/ nutze. Seit ? sind die Codes in einem Register namens "Technical Information" versteckt. Also gehe ich bei Symbolen, welche nicht in der Zeichentabelle oder sonstwo zu finden sind so vor: z.B: https://emojipedia.org/counterclockwise-arrows-button#technical die Zahl U+1F504 als \1F504 ins CSS und fertig.

[Rolf B]

Hallo Killua,

Backslash-Sequenz

Was ist damit gemeint?

Na das, was Du verwendest: \A9. Das hier nennt der en-Sprecher einen Slash: /, und das hier demnach einen Rückwärts-Slash, oder Backslash: \. Naja, anderswo nennt man es auch eine Escape-Sequenz…

Doch das hilft mir nix. Nachher kommt ein Karo mit Fragezeichen raus.

Dann hast Du vielleicht einen Codierungs-Wechsel drin. Die Codierung für HTML5 ist UTF-8, alles andere gehört in ein Casino in Moskau^[1]. D.h. dein Editor sollte auf UTF-8 eingestellt sein, dein HTML in UTF-8 vorliegen, kein meta charset Element im head stecken, das etwas anderes als UTF-8 festlegt, und dein Webserver keinen Header schicken, der ein anderes charset definiert. Dann geht das auch mit den Zeichen.

Es kann natürlich immer sein, dass man Alt-Projekte in einer anderen Codierung hat und es zu mühsam ist, das umzucodieren…

Rolf

---

1. Russisches Roulette, natürlich 😉 ↩︎

[Killua]

Na das, was Du verwendest: \A9.

Ach so

Das hier nennt der en-Sprecher einen Slash: /,

Weiß ich eh. Habe nur manchmal eine lange Leitung

Doch das hilft mir nix. Nachher kommt ein Karo mit Fragezeichen raus.

Dann hast Du vielleicht einen Codierungs-Wechsel drin.

Ja, so eine ... du hattest Recht! Die CSS Datei war nicht UTF-8, sondern ANSI. 😮 Warum auch immer ...? Jetzt gehts natürlich!

Danke!

D.h. dein Editor sollte auf UTF-8 eingestellt sein, dein HTML in UTF-8 vorliegen, kein meta charset Element im head stecken, das etwas anderes als UTF-8 festlegt, und dein Webserver keinen Header schicken, der ein anderes charset definiert. Dann geht das auch mit den Zeichen.

Auch klar und sogar für mich verständlich.

Nochmals Danke!

[Rolf B]

Hallo Killua,

nach meiner Kenntnis geht das nicht. Das style-Attribut beeinflusst nur da Element selbst und kann keine Pseudoelemente kreieren.

Was spricht gegen das Stylesheet? Was genau ist der Anwendungsfall? Finden wir da vielleicht einen Workaround?

Rolf

[Killua]

nach meiner Kenntnis geht das nicht.

Ok, dann isses halt so. Danke.

Was spricht gegen das Stylesheet? Was genau ist der Anwendungsfall? Finden wir da vielleicht einen Workaround?

Wie oben kurz angesprochen, ein WP Plugin bestimmt da recht dominant die Regeln und da dachte ich: Lass es in Ruhe seine Klassen und IDs vergeben und klebe die paar Symbole halt inline rein.

Aber es klappt eh schon, mit einer weiteren Class (im Beispiel oben "copy") gehts. Nur fehlt mir ein Leerzeichen ...