Why isn't the CSS pseudo ::before functioning properly on an Icon element?

I am encountering an issue with displaying a vertical line to icons in my HTML code. The structure of the HTML is as follows:

Below is the HTML code snippet:


<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>

My goal is to have a vertical line connecting the icons (fa-car) in each section, except for the last one where the line should not be displayed. Here is an example of what I'm trying to achieve: Sample Image

However, the vertical line implementation seems to be ineffective due to issues with my current CSS styling.

.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;
}
/* Vertical line display*/
.fa-car::before {
    content: '';
     position: absolute;
     height: calc(100% + 28px);
     width: 3px;
     background: #33004e;
     margin-top: 30px;
     margin-left: 6px;
    
}
/* 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;
    }
}

Upon testing, I found that enclosing the icon class within a div resolves the issue with the vertical line but it's not the desired approach for me.

Could there be any errors in my CSS causing this problem?

htmlcsscss-selectors

Answer №1

Perhaps this solution may help with your inquiry. I have created a basic demonstration to address the issue, which seems to be related to positioning. If the ::before pseudo-element's parent, the i tag, does not have a relative position set, giving it an absolute position will cause it to be placed according to the entire page. Additionally, you can utilize the :not() selector to target all elements except the last child.

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

.icon {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: block;
  /* Set the icon's position to relative */
  position: relative; 
}

.box:not(:last-child) > .icon::before {
    content: '';
    /* Adjust size based on icon dimensions */
    position: absolute;
    height: calc(100% + 28px);
    width: 3px;
    background: #33004e;
    /* Center using top or left and percentage units */
    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>

Answer №2

Perhaps you could find this useful 

<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;
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;
}

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

.fa-car::before {
content: '';
position: absolute;
height: calc(100% + 28px);
width: 3px;
background: #33004e;
top: 23px;
left: 22px;
}

.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;
}

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launch the jQuery Fancybox on a separate webpage

I am facing an issue where I have a link in my index.html page and I need it to open a div located in another page named index2.html, but for some reason, it is not working. This is the code I currently have: Link in index.html <a href="#modal" id="o ...

javascriptjqueryhtmlcss

Performing PHP MySQL table database insertion utilizing the $_GET approach using Codeigniter-3 and Dropzone-4.1 plugin

Currently working with CodeIgniter 3 and running into an issue with "id_case" showing as undefined index. When I click a link in index.php: <?php echo "<td><a href='/ci_dropzone/?id_case=".$row['id_case']."'>Upload File ...

phpmysqlcsscodeigniter-3

Press the toggle button to switch the image display

Currently learning HTML and attempting to design a dashboard. I want to display the status (ON, OFF, OPEN, or CLOSED) of a room or door using an icon. I have images for open/close doors and lightbulbs. Need assistance in adding an element to all the exist ...

javascripthtmlcss

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

What is the best way to create a JavaScript Up/Down Numeric input box using jQuery?

So, I have this Numeric input box with Up/Down buttons: HTML Markup: <div class="rotatortextbox"> <asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server">0</asp:TextBox> (In mins) </div> <div cl ...

javascriptjqueryhtmlasp.net

Is there a way to make FullPage and Lightbox compatible with each other?

Currently utilizing Fullpage.js for my website, I am looking to incorporate a lightbox in one of the sections. However, upon attempting to load the script and CSS, my fullpage layout breaks and the sections collapse. I have experimented with placing the ...

javascriptjquerycsslightboxfullpage.js

Troubleshooting a jQuery Drop-Down Problem

My dropdown menu is not working as expected. I want to show the sub-menu when clicking on an item, and remove the previous sub-menu when clicking or blurring on another menu by removing the drop-down class. However, my current jQuery code does not seem to ...

jqueryhtmlcssclassdrop-down-menu

Retrieve the chosen item from the autocomplete feature

Unfortunately, I have encountered an issue with this solution as I was unable to get it to work correctly in my code. The objective is to retrieve the selected item and then call another function to utilize it. The script is as follows: <script type=" ...

javascriptjqueryhtmljson

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

javascriptjqueryhtmlscroll

The beauty of Aurelia's scoped CSS

Embarking on my Aurelia journey, I find myself navigating through the vast world of web development with tools like nodejs, gulp, and more. The Aurelia CLI has made it convenient for me to set up a visually appealing Aurelia project in Visual Studio Code ...

cssgulpaurelia

Adjustment of Facebook button positioning in floating bar on Firefox

My floating bar currently has 5 social buttons, but I've noticed that the Facebook button is shifting about 20 pixels to the left. Could this be an issue with the CSS elements? After inspecting the elements, I found that when I remove position: absol ...

htmlcssfacebookfirefoxmozilla

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

javascripthtmlreactjsreact-hooksuse-state

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascripthtmlcsslistclass

Obtaining the source id using HTML5 Drag & Drop functionality

Is there a way to retrieve the id of the div I am dragging from, similar to how it is demonstrated here? Your insights are greatly appreciated. Thank you. ...

html

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

javascriptjqueryhtmlbackbone.jsurl-routing

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

javascriptjqueryhtml

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

csshyperlink