靈活的邊界內聯元素寬度

我試圖創造一個內聯元素的視覺效果，this is what I want 靈活的邊界內聯元素寬度

但使用內聯元素我無法弄清楚如何使這一紅線以上職稱靈活，這是我到目前爲止：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; 
    } 
    } 
}

有人可以幫助我嗎？

來源

2016-03-28 Rafael Viana

您可以使用:: first-line`僞元素並將box-shadow應用於該元素。

MDN Reference

的::一線CSS僞元素應用於款式只有一個元素的第一道防線。第一行文本的數量取決於許多因素，如元素的寬度，文檔的寬度以及文本的字體大小。與所有僞元素一樣，:: first-line不匹配任何實際的HTML元素。

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>

注：

第一線已經僅在塊的容器盒之意，因此::一線僞元素僅具有對顯示值爲block，inline-block，table-cell或table-caption的元素有影響。在所有其他情況下，::一線不起作用。

來源

2016-03-28 12:24:21

爲什麼在火狐瀏覽器和火狐瀏覽器開發者中這不適用於我？ – xpy

使用::一線僞元素僅作爲你說適用於塊狀花紋要素，但我需要爲了使用內聯塊的文本具有背景所示在第二個例子下面

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>

來源

2016-03-29 10:15:14

我已經找到了如何做到這一點：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>

來源

2016-03-29 14:37:39

靈活的邊界內聯元素寬度

回答

相關問題