CSS 伪::在不处理 Icon 元素之前？

问题描述 投票：0回答：2

我有以下 HTML，如下所示：

这是 HTML：


<div class="newsTimePeriod item-One">
        <h3>News</h3>
        <i class="fas fa-car"></i>       
    <div class="aboutItem">
        <p>Fire is the rapid oxidation of a material
            in the exothermic chemical process of combustion,
            releasing heat, light, and various reaction products.
        </p>
    </div>
</div>

<div class="newsTimePeriod item-Two">
        <h3>Old News</h3> 
        <i class="fas fa-car"></i>
    <div class="aboutItem">
        <p>Water is an inorganic with the chemical formula H 20.
            It is a transparent, tastless, odorless, and nearly
            colorless chemical substance.
        </p>
    </div>
</div>

我尝试在图标（fa-car）上显示一条垂直线并将其连接到下一个图标。如果它是最后一个图标，则不会显示垂直线。例如 something like this:

由于某种原因，垂直线不适用于我当前的 CSS。

.newsTimePeriod {
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 0px 7px 0px 7px;
}

.newsTimePeriod h3{
    width: 100px;
    float: left;
    display: flex;
}

.fa-car, .aboutItem{
    margin: 18px 0px 0px 18px;
}

.fa-car {
    border-radius: 13px;
    height: 29px;
    width: 29px;
    color: #fff;
    background-color: #001277;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 12px;
}

.aboutItem {
    padding: 14px 14px 14px 14px;
    max-width: 570px;
    background: #FFFFFF;
    border: 1px solid #DBDADA;
    color: #000;
}
/* To display vertical line*/
.fa-car::before {
    content: '';
     position: absolute;
     height: calc(100% + 28px);
     width: 3px;
     background: #33004e;
     margin-top: 30px;
     margin-left: 6px;
    
}
/* To hide vertical line on the last icon*/
.newsTimePeriod:last-child .fa-car::before {
    display: none;
}

@media (max-width: 768px) {
    .newsTimePeriod {
        flex-direction: column;
    }
    .newsTimePeriod .aboutItem {
        width: 70%;
        align-self: end;
        margin: auto;
    }
    .newsTimePeriod h3  {
        flex-direction: row-reverse;
        padding: 0 0 0 22px;
    }
}

我注意到，如果我将图标类包装在 

div
中，则垂直线 CSS 可以工作，但我不希望图标类包装在 div 中。

我的 CSS 有问题吗？

html css css-selectors
2个回答
0
投票

不确定这是否是您所要求的，但我做了一个简单的演示来尝试一下，我认为主要问题是定位。如果

::before
的父级，
i
标签不是相对定位的，给它绝对定位会使其位置按照整个页面来放置。另外，您可以使用 
:not()
选择除最后一个子项之外的所有子项。

.box {
  margin: 2rem;
  padding: 1rem;
  border: 1px solid red;
}

.icon {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: block;
  /*give the icon a position of relative*/
  position: relative; 
}

.box:not(:last-child) > .icon::before {
    content: '';
    /*now this will be sized according to the size of the icon*/
    position: absolute;
    height: calc(100% + 28px);
    width: 3px;
    background: #33004e;
    /*then use top or left, and % units to center it*/
    top: 100%;
    left: 50%;
}
<body>
  <div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
    <div class="box"><i class="icon"></i></div>
  </div>
</body>

0
投票

也许你需要这个 

<div>
    <div class="newsTimePeriod item-One">
        <h3>News</h3>
        <i class="fas fa-car"></i>
        <div class="line"></div>
        <div class="aboutItem">
            <p>
                Fire is the rapid oxidation of a material
        in the exothermic chemical process of combustion,
        releasing heat, light, and various reaction products.
            </p>
        </div>
    </div>
    <div class="newsTimePeriod item-Two">
        <h3>Old News</h3>
        <i class="fas fa-car"></i>
        <div class="line"></div>
        <div class="aboutItem">
            <p>
                Water is an inorganic with the chemical formula H 20.
        It is a transparent, tastless, odorless, and nearly
        colorless chemical substance.
            </p>
        </div>
    </div>
</div>
<style>
.newsTimePeriod {
display: flex;
position: relative;
/* overflow: hidden; */
padding: 0px 7px 0px 7px;
}

.newsTimePeriod h3 {
width: 100px;
float: left;
display: flex;
}

.line {
    position: absolute;
    top: 53%;
    width: 3px;
    height: calc(100% - 50%);
    background-color: #33004e;
    z-index: -1;
    left: 142px;
}

.fa-car,
.aboutItem {
margin: 18px 0px 0px 18px;
}

.fa-car {
border-radius: 13px;
height: 29px;
width: 29px;
color: #fff;
background-color: #001277;
padding: 5px;
box-sizing: border-box;
margin-top: 12px;
position: relative; /* Add position relative to keep the pseudo-element inside */
}

.aboutItem {
padding: 14px 14px 14px 14px;
max-width: 570px;
background: #FFFFFF;
border: 1px solid #DBDADA;
color: #000;
}

/* To display vertical line */
.fa-car::before {
content: '';
position: absolute;
height: calc(100% + 28px);
width: 3px;
background: #33004e;
top: 23px; /* Updated top value to align with the icons */
left: 22px; /* Updated left value to align with the icons */
}

/* To hide vertical line on the last icon */
.newsTimePeriod:last-child .line {
    display: none;
}

@media (max-width: 768px) {
.newsTimePeriod {
    flex-direction: column;
}
.newsTimePeriod .aboutItem {
    width: 70%;
    align-self: end;
    margin: auto;
}
.newsTimePeriod h3 {
    flex-direction: row-reverse;
    padding: 0 0 0 22px;
}

/* Update for responsive view on small screens */
.fa-car::before {
    top: 0;
    left: 22px;
    height: 100%;
}
.line {
    position: absolute;
    top: 53%;
    width: 3px;
    height: calc(100% - 30%);
    background-color: #33004e;
    z-index: -1;
    left: 44px;
}


}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.