根据背景 colored颜色 反转 CSS 字体 colored颜色

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

Css相关问答推荐

单独.css文件中的样式不适用于Angular 元件

VueJS CSS动画不会扩展到v-card/v-col之外

SVG文本在移动浏览器上增长并溢出

如何为多个背景和棋盘设置不同的大小

当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器？

下拉菜单未展开- bootstrap

为什么继承时1rem值不同？

如何在Delphi的TMS Web Core上向窗体添加背景图像

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

使用 React JS 和自定义 CSS 创建 Cookie 横幅

将 tailwincss 转换为普通 CSS？

在 Tailwind css 中，间距对我不起作用

全部：初始与使用 CSS 重置

如何使单选按钮看起来像切换按钮

flexbox 布局中的 Padding-bottom/top

如何在 CSS 中控制列表样式类型光盘的大小？

Bootstrap 3 - 在每个网格列之后打印布局和中断

如何隐藏 Chrome 中 HTML5

元素上默认显示的箭头？

什么是 DOM 回流？

IE划掉伪元素CSS？