在代码中,行是使用伪元素添加的。 由于某种原因,颜色不会透过它显示出来。
我如何使用代码中的那些伪元素让它工作?
我要做到不加边框,这是必须的。
我也不想使用线性渐变。
我真的只是想用我现有的代码来做这件事,没有添加任何额外的东西。
我已经在使用背景颜色,只是它们没有显示出来。
它要求我提供更多信息,但基本上就是这样。
它应该是这样的:
它看起来像这样:
https://jsfiddle.net/kytc6sb0/89/
.wrap {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.wrap a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
color: transparent;
background: rgba(0, 0, 0, .2);
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrap li a {
position: relative;
background: #ffffff;
border: 3px solid #0059dd;
}
.wrap li a::before,
.wrap li a::after {
content: '';
position: absolute;
top: 0;
width: 12px;
height: 44px;
}
.wrap li a::before {
left: 0;
background: #00ffff;
}
.wrap li a::after {
right: 0;
background: #ff00ff;
}
li .lines a::before,
li .lines a::after {
content: "";
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
li .lines a::after {
left: 29px;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.hide {
display: none;
}
<div class="wrap">
<ul class="nav">
<li>
<div class="lines">
<a href="" target="_blank"></a>
</div>
</li>
</ul>
最佳答案
无边界
由于您的限制,这更像是一种解决方法。在 lines
div 上创建另一个 before/after 元素,并将这些元素用作您的行。
https://jsfiddle.net/raj0porg/
.lines {
position: relative;
}
.lines::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 44px;
background: #00ffff;
z-index: 1;
}
.lines::after {
content: "";
position: absolute;
top: 3px;
left: 35px;
width: 12px;
height: 44px;
background: #ff00ff;
z-index: 1;
}
旧答案
除了设置线条的背景之外,您还应该使用边框。
https://jsfiddle.net/qd7xLsdt/
我删除了影响这两行的 background
、left
和 width
属性(否则,之前的属性将被覆盖):
li .lines a::before,
li .lines a::after {
content: "";
position: absolute;
top: 0;
//left: 12px;
//width: 3px;
height: 100%;
//background: #0059dd;
}
我还为你的线条添加了边框:
.wrap li a::before {
left: 0;
background: #00ffff;
border-right: 3px solid #0059dd;
}
.wrap li a::after {
right: 0;
background: #ff00ff;
border-left: 3px solid #0059dd;
}
关于html - 试图让颜色显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48054978/