Meine CSS :: nach nur auf dem letzten Element anwenden

Question

wollte ich eine Grenze Boden Gefälle zu meinem div hinzuzufügen, nachdem auf dem Netz suchen ich eine Lösung gefunden, die ist:

.element { 
    height: 55px; 
    max-width: 400px; 
    background-color: #454A4D; 
    margin-top: 20px; 
} 
.element:after { 
    content: ""; 
    background: -webkit-linear-gradient(left, #343738 0%, #e07051 100%); 
    display: block; 
    height: 4px; 
    width: 400px; 
    position: absolute; 
    bottom: 0; 
} 

„Element“ ist die Klasse meines Div,

Was ich bekomme ist genau der Stil, den ich will, aber es ist nur für die letzte div mit der Klasse .element angewendet! die geben dies:

Jeder Hinweis?

Answer 1

Ja, die Menüpunkte (Element 1, Element 2 und Element 3) sind nicht positioniert. Sie sind static. Das Element, das sie enthält, hat eine position (absolute, fixed oder relative), die die after 's veranlasst, dieses Element als Referenz zu nehmen, um sie selbst zu setzen.

Einstellung Position relativ zu Element würde Ihr Problem beheben:

.element { 
    position: relative; 
} 
.element:after { 
    content: ""; 
    background: -webkit-linear-gradient(left, #343738 0%, #e07051 100%); 
    display: block; 
    height: 4px; 
    width: 400px; 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

Setzen Sie die position -Eigenschaft auf relativ zu Ihrer .Element-Auswahl.