HTML-Element in voller Breite einschließlich :: vor Selektor

Question

So habe ich diesen Beispiel-Code:

<span class="element-class"><input type="text"></span> 

Die .element-class ist width:100%; Und ich habe einen ::before Wähler mit Inhalt (FontAwesome Symbol). Aber der ::before Inhalt des Selektors ist in einer anderen Zeile als das input Element.

¿Wie kann ich tun, um ein 100% width Element einschließlich der ::before Selektor zu haben? Ich habe einen Workaround mit einer Breite von 95% gemacht. Aber ist keine elegante Lösung.

Answer 1

Flexbox kann das tun.

span.element-class { 
 
    display: flex; 
 
} 
 
span.element-class input { 
 
    flex: 1; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="element-class fa fa-search"><input type="text"></span>