首页 文章

如何使用伪元素添加2个边框颜色或不使用额外的标记？

提问于
浏览 次
1

我放弃了......

.wrapper {
     border: 1px solid #aaa;
     width: 300px;
     height: 300px;
     padding: 20px
}
h2 {
     border-bottom: 2px solid #ddd;
     display: block;
}
h2 span {
     border-bottom: 2px solid #f00;
     display: inline-block;
     margin-bottom: -2px;
}

<div class="wrapper">
  <h2><span>TITLE HERE</span></h2>
</div>

请运行代码段以查看我的目标 . RED边框的长度是文本 Headers 的长度 . 如何在不添加范围或任何标记的情况下实现这一目标？我尝试将灰色边框添加到伪元素::之前，但它只加倍红色边框的长度，灰色边框应填充框的其余部分 . 请帮我玩吧 . 谢谢！

html css

2 回答

  • 2

    这是一个使用两个伪元素的选项 .

    两个伪元素相对于父元素的顶部绝对定位 . 对于红色边框，关键是将父元素设置为 inline-block ，以使其具有基于"shrink to fit"的宽度 . 不幸的是，这种方法要求第二个伪元素的硬编码宽度等于 .wrapper 元素的宽度 .

    Example Here

    .wrapper {
    border:1px solid #aaa;
    width:300px;
    height:300px;
    padding:20px
}
h2 {
    display: inline-block;
    position: relative;
}
h2:before,
h2:after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
}
h2:after {
    border-bottom: 2px solid #f00;
}
h2:before {
    border-bottom: 2px solid #ddd;
    width: 300px;
}

    <div class="wrapper">
    <h2>TITLE HERE</h2>
</div>
    回复于
  • 1

    我试图推动它，并想出了这个解决方案 . 我使用index-1和2作为图层顺序 . Josh的解决方案很好，但它不支持text-align属性 . 我需要text-align：特别是对 . 不使用z-index在这里运行时似乎没问题，但是当我将它应用到我的设计中时，如果没有它，它将无法工作 .

    .wrapper {
    border:1px solid #aaa;
    width:500px;
    height:300px;
    padding:20px
}
h2 {
    display:inline;
    border-bottom: 2px solid red;
    z-index:1
}
h2:after {
    content: '';
    display:block;
    width: 100%;
    border-bottom: 2px solid #ddd;
    margin-top:-1px;
    z-index:2
}

    <div class="wrapper">
<h2>TITLE HERE</h2>
</div>
    回复于

相关问题