Inline-Element mit flexiblen Randbreite

Question

Ich versuche, einen visuellen Effekt zu einem Inline-Elemente zu erstellen, this is what I want

Aber Inline-Elemente unter Verwendung Ich kann nicht herausfinden, wie über dem Titel flexibel, dass rote Linie zu machen, diese ist das, was ich so weit gekommen: https://jsfiddle.net/1oLzzw6t/

<div><span class="info-w option1"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div> 
<div><span class="info-w option2"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div> 

body{ 
    padding: 5%; 
    background: black; 
} 

.info-w{ 
    padding-right: 10%; 
    position: relative; 
    z-index: 1; 
    .info{ 
    float: left; 
    font-family: Helvetica; 
    font-size: 24px; 
    line-height: 1.2; 
    font-weight: bold; 
    color: black; 
    >span{ 
     display: inline; 
     background: #FFF; 
     position: relative; 
    } 
    } 
    &.option1{ 
    .info{ 
     >span{ 
     border-top: 3px solid red; 
     } 
    } 
    } 
    &.option2{ 
    .info{ 
     box-shadow: 0 -3px 0 red; 
    } 
    } 
} 

Jemand kann mir helfen?

Answer 1

Sie können das Pseudo-Element :: first-line` verwenden und den Box-Schatten darauf anwenden.

MDN Reference

Die :: first-line CSS Pseudo-Element gilt nur Stile auf die erste Zeile eines Elements. Die Menge des Textes in der ersten Zeile hängt von zahlreichen Faktoren ab, wie der Breite des Elements, der Breite des Dokuments und der Schriftgröße des Textes. Wie alle Pseudo-Elemente stimmt :: first-line mit keinem echten HTML-Element überein.

p { 
 
    display: inline-block; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    width: 80%; 
 
} 
 
p::first-line { 
 
    box-shadow: 0 -3px 0 red; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</p>

Anmerkung:

Eine erste Leitung ist nur in einem block Behälterbox Bedeutung haben, damit die :: Erstlinientherapie Pseudoelement hat nur eine Auswirkung auf Elemente mit einem Anzeigewert von Block, Inline-Block, Tabellenzelle oder Tabellenbeschriftung. In allen anderen Fällen hat :: first-line keine Wirkung.

Answer 2

Mit dem :: First-Line-Pseudoelement funktioniert nur für Blockelemente wie Sie gesagt hat, aber ich brauche einen Inline-Block zu verwenden, um, dass der Text einen Hintergrund hat, wie unten

im zweiten Beispiel gezeigt

body{ 
 
    background: #000; 
 
    padding: 0 10%; 
 
} 
 

 
span { 
 
    font-family: Arial; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    background: #FFF; 
 
    color: #000; 
 
    margin: 30px 0 
 
} 
 

 
.notpadded{ 
 
    display: block; 
 
} 
 

 
.notpadded::first-line { 
 
    box-shadow: 0 -3px 0 red; 
 
}

<span class="notpadded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</span> 
 

 
<span class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</span>

Answer 3

ich habe herausgefunden, wie es zu tun: http://codepen.io/rafaviana/pen/yOoOQr

body{ 
 
padding: 10% 30%; 
 
} 
 

 
.wrapper{ 
 
margin: 40px 0; 
 
} 
 

 
span, p { 
 
display: inline-block; 
 
font-size: 24px; 
 
margin: 0; 
 
} 
 

 
span::first-line, p::first-line { 
 
box-shadow: 0px -5px 0px 0px black; 
 
} 
 
i { 
 
background-color: pink; 
 
}

<div class="wrapper"> 
 
<span><i>Lorem ipsum djdgn dgs dhgd hdb dhgsd sd sdhg d dshbsd hgds hd hdss hg d s hds</i></span> 
 
</div> 
 

 
<div class="wrapper"> 
 
<p><i>Lorem ipsum djdgn dgs dhgd hdb dhgsd sd sdhg d dshbsd hgds hd hdss hg d s hds</i></p> 
 
</div>