CSS-Pseudo-Element funktioniert nicht

Question

Ich versuche, einen Farbverlauf border unter einem Bild in einem div zu erstellen.

Ich bin 100% sicher, dass mein CSS-Code selbst vollkommen in Ordnung ist, wie ich es zuvor auf anderen Elementen getestet habe.

Das Problem ist, dass es irgendwie ablehnt, das richtige Element auszuwählen und das Pseudoelement darunter zu platzieren.

#profilePicture { 
 
    width: 200px; 
 
    margin-left: 25px; 
 
    border-top: 1px solid #070707; 
 
    border-left: 1px solid #070707; 
 
    border-right: 1px solid #070707; 
 
} 
 
#pf { 
 
    display: block; 
 
    width: 200px; 
 
} 
 
#pf:first-child:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 1px; 
 
    background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: linear-gradient(to right, #070707, #a1a1a1, #070707); 
 
    top: -1px; 
 
    left: 0; 
 
}

<div id="profilePicture"> 
 
    <img id="pf" src="layout/images/profile/pf.png"> 
 
</div>

Soweit ich es soll sagen kann #pf auswählen, welche das erste Kind seiner Eltern (true) ist und nachdem es den Pseudo-Element hinzufügen?

Edit: habe ich top: 1px und größere Höhe s versuchen, sicher zu sein. Dies hatte keine Wirkung.

Answer 1

Sie nicht in Pseudoelemente (::before und ::after) verwenden können, img Tag (zumindest für jetzt).

sehen, was W3C specs sagt:

Hinweis. Diese Spezifikation definiert die Interaktion von :before und :after mit ersetzten Elementen (wie IMG in HTML) nicht vollständig. Dies wird in einer zukünftigen Spezifikation detaillierter definiert werden.

Sie müssen also das Pseudo-Element stattdessen auf das Elternelement anwenden.

Auch müssen Sie position:relative in der übergeordneten verwenden, weil Sie position:absolute in Pseudo-Element anwenden. Damit behalten Sie das Pseudoelement im Fluss mit dem DOM.

Hinweis gibt es ein paar Änderungen in Ihrem CSS

body { 
 
    margin: 0 
 
} 
 
#profilePicture { 
 
    width: 200px; 
 
    margin-left: 25px; 
 
    position: relative; 
 
    border: solid #070707; 
 
    border-width: 1px 1px 0 1px 
 
} 
 
#pf { 
 
    display: block; 
 
} 
 
#profilePicture::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 5px; 
 
    background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: linear-gradient(to right, #070707, #a1a1a1, #070707); 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="profilePicture"> 
 
    <img id="pf" src="//dummyimage.com/200x200&text=image"> 
 
</div>

Answer 2

Sie können keine Pseudo-Elemente (:before und :after) mit img-Tag verwenden, erstellen Sie zusätzliche div um img oder fügen Sie :after zu Ihrem #profilePicture Element statt.

Auch gibt es keinen Grund der Verwendung first-child in #pf:first-child:after Selektor, da nur ein Element mit pf ID auf der Seite sein kann.

Edit:

1. position: relative in Ihre #profilePicture
2. entfernen top: 1px; von :after
3. hinzufügen bottom: 0; zu :after

Answer 3

Fügen Sie einfach position:relative für diesen Wähler #profilePicture, und ändern Sie die #profilePicture::after zu:

#profilePicture::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 1px; 
 
    background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); 
 
    background: linear-gradient(to right, #070707, #a1a1a1, #070707); 
 
    bottom: 1px; 
 
    left: 0; 
 
}