使用 CSS 在元素后面创建一条线：before

Posted 2023-03-06

【中文标题】使用 CSS 在元素后面创建一条线：before

【英文标题】：Creating a line behind elements with CSS :before

【发布时间】：2014-04-26 05:31:05

【问题描述】：

可以用:before 创建一条线（下面的灰线），将其父 div 的元素隐藏？

我有什么：http://jsfiddle.net/2Qn4Y/1/

【参考方案1】：

使用:not(:last-child) 从选择中排除最后一个.table 元素。从那里，只需将绝对定位的 :after 伪元素添加到 .row.fixed 元素 - 它应该相对于父元素。至于定位，使用left:50%和margin-left:-3px（宽度的一半）。

UPDATED EXAMPLE HERE

.table:not(:last-child) .row.fixed:after 
    content:'';
    width: 6px;
    height: 30px;
    background: #D3D3D3;
    position: absolute;
    left: 50%;
    margin: -4px 0 0 -3px;
    top: 100%;

作为Nico O points out，FF 中有一个错误，relative/absolutely 定位表元素。这是使用上述 CSS 的one possible 解决方法。

【讨论】：

很好，真的很干净，反应灵敏。但似乎在 Firefox 中被破坏了。 （表position: relative;bug）

@NicoO 1+ 因为你的工作在 FF.. 感谢您指出这一点。我以前在 FF 中遇到过这个错误，但我不确定我是如何修复它的。有什么想法吗？

我更喜欢您的解决方案。但是这个错误真的很烦人......我认为这个用例没有解决方法......希望有人证明我错了

@NicoO 这是一个丑陋的解决方案(example) .. ***.com/questions/5148041/…

【参考方案2】：

您可以创建一个新的父元素 (div) 来附加一个类。这是一个例子：http://jsfiddle.net/2Qn4Y/6/

.gray-bar 
  position: relative;


.gray-bar::after 
  content: "";
  background-color: lightgray;
  position: absolute;
  width: 5px;
  left: 33px;
  top: 0;
  bottom: 10px;
  z-index: -1;


.table 
  display: table;
  height: 50px;
  font-family: sans-serif;
  margin: 20px 0;


.row 
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;


.row.fluid 
  width: 100%;
  background: #f4f4f4;
  border-radius: 5px;

<div class="gray-bar">
  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/AKmmXE4.gif" /></div>
    <div class="row fluid">Hello, I'm Mickey!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/f6948mH.gif" /></div>
    <div class="row fluid">I'm Goofy!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/Dm2vlrA.gif" /></div>
    <div class="row fluid">I'm Donald Duck!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/vRggi12.gif" /></div>
    <div class="row fluid">Whoof!</div>
  </div>
</div>

【参考方案3】：

DEMO

只需将其添加到您的 CSS 中：

.table
    position: relative;


.table:before
    content: "";
    height: 40px;
    border-left: 5px solid #ddd;
    position: absolute;
    margin-left: 32px;
    margin-top: -35px;
    z-index: -1;

.table:first-child::before
    border-left: none;

注意： position: relative;在.table 以及position: absolute; 和z-index: -1; 上:before 保证:before 创建的伪元素不会与实际元素重叠。

【讨论】：

：IE8 不支持last-child

@Sigma 正确，更新了答案以兼容 IE8。

【参考方案4】：

这是工作的Demo。完全响应无论添加了多少图标和数据。布局不会受到影响。

div.table:last-child:beforeborder:0; /*this will remove the border from the last child*/

div.table:before
position:absolute;
content: " ";
left:42px;
height:22%;
border-left:6px solid #D3D3D3;
 z-index:-1; /*this negative value required to put the line behind the image*/

【参考方案5】：

http://jsfiddle.net/2Qn4Y/61/http://jsfiddle.net/2Qn4Y/61/show 不需要额外的容器。

.table 
    position: relative;

.table:after 
    background: none repeat scroll 0 0 #DADADA;
    content: "";
    height: 100%;
    left: 34px;
    position: absolute;
    top: -24px;
    width: 4px;
    z-index: -1;

.table:first-child:after 
   content: "";
   display: none;

【参考方案6】：

包装器和背景也可以正常工作：http://jsfiddle.net/2Qn4Y/60/

<div class="lined">
<!-- here your divs -->
</div>

渐变版本：

.lined 
    background:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 32px, #DADADA 32px, #DADADA 38px, rgba(255, 255, 255, 0) 38px, rgba(255, 255, 255, 0));
    /* gradient can be a few pix gray image repeated for older brower*/


img 
    vertical-align:top;/* to avoid gap underneath*/

图像版本http://jsfiddle.net/2Qn4Y/63/：

.lined 
    background:url(http://dummyimage.com/6x2/dadada/dadada) repeat-y  32px

img 
    vertical-align:top;