html5 - 在不改变html的情况下,如何只用CSS将背景挤压成一条线,文字在上面显示
大家讲道理
大家讲道理 2017-04-17 11:00:33
0
1
365

就像这样

现在HTML的结构是一个p包含了这些文字,里面没有别的可用元素,父元素是更大的框了。

由于是插件生成的HTML,所以HTML没法改,我觉得不到万不得已最好也别改插件,插件不是我写的,以后更新版本又得改,很麻烦。

有没有什么办法使用CSS实现这样的效果,主要这个绿条前面有个深色部分,所以也没法用border做。
考虑过用after,不过不太会用这个东西,试了几种写法都没有这种效果。
用line-height压成线了,不过文字在下面...

会有好几种颜色,所以最好是CSS能实现。
页面是响应式的,这个条可能会有1000px+的长度。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆 (1)
大家讲道理

用那条绿线做background-image,background-position设置为left bottom,效果:

更新一下:不用图片
1. HTML:

123456

2. CSS

#test { width: 104px; height: 30px; border-bottom: 5px solid #5DD301; position: relative; }
#test:after { content: ''; display: block; width: 5px; height: 5px; background-color: #1C7600; position: absolute; bottom: -5px; }
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!