css child before

[Robert0001]

hallo

ich möchte folgenden effekt erstellen nur klappt das leider nicht mit dem zweiten span

<h1>Neue <span>Infrastruktur</span> bequem im <span>Selbstbau</span></h1>

h1 span {
font-size: 3rem;
position: relative;
}
h1 span:first-of-type:before {
content: "";
position: absolute;
background-color: lightgreen;
top: 35px;
width: 100%;
height: 20px;
z-index: -1;
}

 

[floq0r]

Probier doch selber ein bisschen herum bevor du wegen einem offensichtlich kopierten Beispiel gleich wieder hier fragst

 

[Robert0001]

ist kein beispiel.. ich hab das selbst gemacht..
ich habe nth-child(2):before ausprobiert, funktioniert aber leider nicht, jetzt weiß ich nicht wo der fehler ist

Ergänzung (5. Dezember 2022)

ps.. wenn ich wegen codes frage, dann ist es weil ich gerade nicht weiter weiß, aber ich kopiere keine codes und mach diese selbst - nur mal am rande

 

[floq0r]

Was denkst du heißt :first-of-type? Beschreib doch was du überhaupt vor hast.

 

[kachiri]

Wie wäre es einfach mit h1 span:before
Natürlich funktioniert :first-of-type nicht... So bisschen Englischkenntnisse helfen beim Umgang mit Programmier- und Auszeichnungssprachen.

Wenn du dem Style nicht jeden <span>-Tag in einem <h1>-Tag geben möchtest, dann definiert halt eine konkrete Klasse h1.under_line und dann halt <span class="under_line"></span>

 

[Robert0001]

ich weiss was first-of-type heißt.. deswegen hab ich das pseudo element genommen, da es so funktioniert

wenn ich es ändere auf zb. nth-of-type(1) funktioniert es auch auf das erste aber nicht bei (2) auf das zweite

änder ich es zb. auf nth-child(1) funktioniert (2) auch nicht.. normalerweise bekomm ich das alles hin, aber ich glaub ich bin gerade in einem loch.. weiß einfach nicht weiter

Ergänzung (5. Dezember 2022)

Wie wäre es einfach mit h1 span:before
Natürlich funktioniert :first-of-type nicht... So bisschen Englischkenntnisse helfen beim Umgang mit Programmier- und Auszeichnungssprachen.

ja funktoniert auch aber nicht auf das zweite span

Ergänzung (5. Dezember 2022)

stimmt.. eine class könnt ich definieren - siehst.. auf das bin ich jetzt nicht gekommen, wollte es aber ohne class machen

 

[floq0r]

Mit :nth-child(2) funktioniert es. Vielleicht hast du ein anderes Rule das die in die Quere kommt, schau mal in die developer tools.

 

[michi174]

Du kannst es auch ohne Klasse lösen.

https://jsfiddle.net/ftvohxd3/1/

Wenn du es einfach für alle span Elemente innerhalb eines h1 Elements machen möchtest,
dann lass einfach alle Zähler weg.

 

[Robert0001]

nope sry.. ich komm da nicht weiter.. bitte um hilfe!

h1 span {
font-size: 3rem;
position: relative;
}
h1 > span:nth-child(1):before {
content: "";
position: absolute;
background-color: lightgreen;
top: 30px;
width: 100%;
height: 20px;
z-index: -1;
}
h1 > span:nth-child(2):before {
content: "";
position: absolute;
background-color: lightgreen;
width: 100%;
height: 20px;
top: 30px;
}

 

[floq0r]

Schau in die developer tools

edit:

 

[Robert0001]

Du kannst es auch ohne Klasse lösen.

https://jsfiddle.net/ftvohxd3/1/

Wenn du es einfach für alle span Elemente innerhalb eines h1 Elements machen möchtest,
dann lass einfach alle Zähler weg.

Danke du bist ein schatz!

Ergänzung (5. Dezember 2022)

@floq0r ich weiss das! das hab ich schon probiert
@michi174 sry.. funktioniert bei mir nicht

ich hab irgendwo einen wurm drinnen.. na toll.. denk mir ja irgendwas stimmt da nicht

 

[floq0r]

Dann schau eben nicht in die DevTools und wunder dich weiter

 

[Robert0001]

@floq0r ich hab sie doch nebenbei offen.. immer!

 

[floq0r]

Und was steht dort?

 

[Robert0001]

Ergänzung (5. Dezember 2022)

 

[floq0r]

Und da hast du das :before element für das zweite span ausgewählt? Falls ja, welche Dimension hat das element in der computed section?

 

[Robert0001]

 

[floq0r]

Schaut auf den ersten Blick richtig aus, muss ich mir am Desktop ansehen, mit dem Handy komm ich da nicht weiter.
Wenn du im DOM inspector mit der Maus über das :before hoverst, wird es dann im Browser window highlighted?

 

[Robert0001]

@floq0r jap wird es, wenn ich das span anklicke im inspector wird das element blau highlighted

 

[floq0r]

D.h. das :before wird highlighted wo es sein sollte, ist aber (mit grünem background) nicht sichtbar?