Inline elemanı ben bir satır içi öğesine bir görsel etki oluşturmak için çalışıyorum

Question

, genişliği this is what I want

Ama satır içi elemanlarını kullanarak Ben, bu o başlığın üstüne kırmızı çizgi esnek hale anlamaya olamaz 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; 
    } 
    } 
} 

Birisi bana yardımcı olabilir: Şimdiye kadar o mu öldürdü?

Answer 1

:: first-line `sözde elemanını kullanabilir ve kutu gölgesini buna uygulayabilirsiniz.

:: ilk basamak BB sözde eleman

MDN Reference

öğenin sadece ilk satırına stilleri uygular. İlk satırdaki metnin miktarı, öğenin genişliği, belgenin genişliği ve metnin yazı tipi boyutu gibi çeşitli faktörlere bağlıdır. Tüm sözde öğeler gibi, :: ilk satır herhangi bir gerçek HTML öğesiyle eşleşmiyor.

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>

Not:

sadece bir blok-konteynerde anlam olan bir birinci, bu sayede :: birinci basamak sözde öğesi vardır blok, satır içi satır, tablo hücresi veya tablo altyazısı gösterim değerine sahip öğeler üzerindeki bir etki. Diğer tüm durumlarda, :: ilk satırın bir etkisi yoktur. Dediğin gibi :: ilk basamak sözde elemanı kullanma

Answer 2

sadece blok elemanları için çalışır ama

aşağıdaki ikinci örnekte gösterildiği gibi metin bir arka plana sahip bu sırayla bir satır içi bloğu kullanmak gerekir

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

ben bunu nasıl anladım: 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>