Abstand zwischen Text und Rahmen unten

Question

Wie erstelle ich Abstand zwischen dem Text und der Grenze unter dem Text, wie in dem Bild gezeigt, das mit sass/css angefügt ist?

Ich möchte die Entfernung 5px und die Schriftgröße des Textes 15px sein.

Ich versuchte

.selected { 
    color: #284660; 
} 
.selected:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 0; 
    left: 0; 
    bottom: 5px; 
    border-bottom: 2px solid #284660; 
} 

tun, aber das schuf eine Grenze, die zu breit war.

Answer 1

Versuchen eine negative

{

unten: -5px;

}

Answer 2

Neben dem völligen Mangel an Wissen über Ihre DOM-Profil oder welchem ​​Element der & bezieht sich auf, wenn Sie nur eine Grenze und Polsterung an einem inline Element schlagen, werden Sie den gewünschten Effekt haben.

Keine Notwendigkeit, mit Pseudoelementen zu spielen.

Offensichtlich sollten Sie diese Styling-Info in die CSS-Datei legen, ich habe es nur für das Beispiel inlineed.

---

Oh und das nächste Mal, bitte HTML-Beispiel mit Ihrer Probe CSS enthalten. Der einzige Grund, warum ich überhaupt gestört habe, war, dass die Lösung so einfach war wie "Was ist padding für 15, Trebek?"

Answer 3

Ich fühle ein paar Dinge, die im obigen Ausschnitt verbessert werden können.

1. Sie müssen für die gewünschte Wirkung nicht psuedo Element
2. Sie nicht die absolute Positionierung für das, wollen für den Fall verwenden, sollten Sie psuedo Element

Sie versuchen, diese aus kann in jedem Fall verwenden.

&.selected { 
color: #284660; 
border-bottom: 2px solid #284660; 
padding-bottom:10px ; // this should give you some spacing. 
}