我被這個問題困住了。我們?nèi)绾蝿?chuàng)建一個下劃線文本，覆蓋文本高度的 50%，并且在小屏幕上也能響應(yīng)？
2 回答
慕碼人8056858
TA貢獻1803條經(jīng)驗 獲得超6個贊
下劃線實際上是漸變背景。換行后它將被保留：
body {
background-color: #ccc;
}
span {
color: white;
font-size: 2em;
font-weight: bold;
background-image: linear-gradient(to bottom, transparent 50%, #7DE856 50%);
padding: .1em .4em;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
<span>Sample Text</span>
<br>
<br>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore necessitatibus obcaecati nisi quaerat! Provident eum ducimus impedit adipisci sequi.</span>
DIEA
TA貢獻1820條經(jīng)驗 獲得超3個贊
::before在的幫助下CSS
.text {
position: relative;
padding: 1px 7px;
z-index: 1;
font-size: 20px;
line-height: 20px;
}
.text::before {
content: '';
position: absolute;
height: 40%;
width: 100%;
background: green;
opacity: 0.3;
bottom: 0;
left: 0;
z-index: 0;
}
<span class="text">text here</span>
<br>
<span class="text">sample text goes here</span>
<br>
<span class="text">text here</span>
- 2 回答
- 0 關(guān)注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消