Wie füge ich einen Pfeil als <a> in/über den Wrapper hinter h1 hinzu?

[martinatina]

Ich möchte einen Pfeil hinter die Überschrift einfügen der auf eine andere Seite verlinkt
Dabei soll die Überschrift ihre Position nicht verändern:

PozWMVZ

...

codepen.io

ich habe es schon so versucht:

<a class="pfeile" href="projekte.html"><img class="pfeilschwarz" src="Bilder/pfeilschwarz.png"/></a>
über
<h1>

und dann im CSS:
.pfeile{margin-left: -25px}

Dies hat jedoch dazu geführt das die Überschrift nach unten verschoben wird, sie soll aber auf der selben Position bleiben, da sie auf der Seite wo drauf verlinkt wird ebenfalls auf der Position ist (Ich hoffe es ist einigermaßen verständlich beschrieben)

Kann mir da vielleicht jemand weiterhelfen?

 

[basti1012]

Mach doch mal ein border um dein h1 Element, dann siehst du das hinter h1 kein Platz mehr ist.
Du solltest das <a> in den <h1> packen, dann geht das einfacher
*** Link entfernt, weil Seite nicht mehr erreichbar ***

 

[martinatina]

Mach doch mal ein border um dein h1 Element, dann siehst du das hinter h1 kein Platz mehr ist.
Du solltest das <a> in den <h1> packen dann geht das einfacher

Links dahinter

...

codepen.io

Aber der Pfeil soll halt links dahinter sein, gibt es da keine Möglichkeit?

 

[basti1012]

Was heißt den Links dahinter?
Sowas
*** Link entfernt, weil Seite nicht mehr erreichbar ***

 

[martinatina]

Was heißt den Links dahinter ?
Sowas

Links dahinter

...

codepen.io

Genau, aber die Überschrift soll exakt auf der selben Position bleiben wie sie jetzt ist
Es soll ein "zurück" Pfeil werden

 

[basti1012]

Es soll ein "zurück" Pfeil werden

Dann nutze bei mein Beispiel rotate(180deg) ,
Das sieht dann so aus wie Sempervivum es gezeigt hat.

die Überschrift soll exakt auf der selben Position bleiben wie sie jetzt ist

Wie du auf den Bild sehen kannst ist das kein Problem.
Du brauchst da eigentlich nicht viel ändern.
Versuche doch mal meinen Code auf dein Beispiel anzuwenden.

Ich weiß auch nicht, ob mein Code der optimalste weg ist.?
Man könnte auch noch mit h1:before arbeiten.
Wenn Sempervivum auf seinen Bild einen anderen Weg hat, wäre das auch mal interessant zu sehen.

Es ist ja nix großartiges, doch wenn man Validen Code haben will ,muss man auf einiges achten,
zb,
h1 erlaubt kein div als Child,
span aber ja .
Deswegen hatte mein erstes Beispiel ein span Element und kein div.( Hatte aber erst div benutzt, und mich dann bei w3 gewundert das es doch nicht erlaubt ist )

 

[MrMurphy]

Auch wenn es nicht leicht zu verstehen ist: Der Pfeil enthält keinerlei Informationen und ist damit nur ein gestalterisches Element. Deshalb ist es sachlich falsch ihn im Quelltext unterzubringen, weder als Bild noch als Text.

Damit muss er nach den HTML- und CSS-Regeln von HTML5 mittels CSS eingefügt werden. In diesem Fall am sinnvollsten über die Möglichkeit des before.

Im Zug der Datenarmut sollten solche Zeichen möglichst nicht als Bild eingefügt werden, sodern als Zeichen. In der Unicode-Zeichentabelle gibt es viele unterschiedliche Pfeile, die zudem per CSS noch gestaltet werden können, zum Beispiel auch farblich. Oder in der Höhe. Oder der Abstand zum Text. Oder ... Eine Auflistung findet sich beispielsweise unter

https://unicode-table.com/de/sets/arrow-symbols/

Ich gehe mit der Maus auf das von mir gewünschte Zeichen, wählte im sich öffnenden PopUp-Fenster "Kopieren" und füge es mittels der Tastenkombination Strg+V direkt in den CSS-Quelltext ein.

Nebenbei: Auch wenn einige neuere Zeichen im Editor als Fragezeichen angezeigt werden, werden sie vom Browser korrekt angezeigt. Mein Beispielpfeil wird hingegen direkt angezeigt.

Zu dem HTML-Quelltext

<h1><a href="https://www.google.de/">Projektname</a></h1>

reicht dann folgendes CSS

h1 a::before{
   content: "←";
   color: red;
   margin-right: 1rem;
}

Die Farbe (color) ist nur als Beispiel für eine Gestaltung mittels CSS eingefügt.

Das erscheint mir auch am einfachsten, da zum Beispiel die Bildpfade wegfallen, die sich erfahrungsgemäß immer wieder mal ändern.