开发者社区> 问答> 正文

在不改变html的情况下,如何只用CSS将背景挤压成一条线,文字在上面显示

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

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

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

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

展开
收起
a123456678 2016-03-24 16:52:17 2755 0
1 条回答
写回答
取消 提交回答
  • screenshot

    2019-07-17 19:13:05
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载