Generate a secondary table row by utilizing the ::after pseudo-element

I need to add a sub-row to the last row of the table to achieve the look shown in the photo. I am attempting to use pseudo-classes for this purpose, but I am struggling with adjusting the height of the 'tr' element to accommodate the new content.

<tr class="reject">
 <td class="semi-bold">2017</td>
    <td class="semi-bold">Principal amount: 700.00<br>
        Penalty: 0<br>
        Late fee: 100</td>
    <td class="semi-bold">Peugeot</td>
    <td class="semi-bold">000000B1</td>
    <td class="semi-bold">8 CV</td>
    <td class="semi-bold">800.00</td>
    <td class="semi-bold">
      <span class="state">
       <i class="state-suspended"></i>Rejected
      </span>
    </td>
</tr>



.reject {
    position: relative;
}
.reject::after {

    content: "lol";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #000;
    width: 100%;
    margin: 11px;

}

This is my desired outcome:

https://i.sstatic.net/NVyYZ.jpg

This is my current progress:

https://i.sstatic.net/xjeTj.jpg

The expanded table view.

https://i.sstatic.net/twOYO.jpg

htmlcssbootstrap-4

Answer №1

Here are a couple of things to consider: ensure the content of the cells is aligned to the top rather than centered, and remember to place the pseudo element after other content so it can be positioned at the top with 'top: 100%'.

.reject {
  position: relative;
}

.reject::after {
  content: "lol";
  position: absolute;
  rbottom: 0;
  top: 100%;
  left: 0;
  border-top: 1px solid #000;
  width: 100%;
  margin: 11px;
}

.reject td {
  vertical-align: top;
}
<table>
  <tr class="reject">
    <td class="semi-bold">2017</td>
    <td class="semi-bold">Montant principal : 700,00<br> Pénalité : 0<br> Majoration de retard : 100</td>
    <td class="semi-bold">Peugeot</td>
    <td class="semi-bold">000000B1</td>
    <td class="semi-bold">8 CV</td>
    <td class="semi-bold">800,00</td>
    <td class="semi-bold">
      <span class="state">
       <i class="state-suspended"></i>Rejeté
      </span>
    </td>
  </tr>
</table>

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

Prevent users from accessing the refresh and back/forward functions in all browsers

I'm currently developing an evaluation system where candidates take exams. The page displaying questions and choices is rendered within an iframe. This iframe page also includes a JavaScript timer. To prevent candidates from refreshing the page using ...

jqueryhtmlbrowser

Error encountered at the conclusion of input within a search button segment

I am currently in the process of developing a webpage that accepts a string input and then utilizes the Wikimedia API to search Wikipedia for 10 relevant pages. The issue I am facing lies within my JavaScript success function, where I intend to populate a ...

javascriptjqueryhtmlajax

Incorrect Alignment of CSS Menu Popout

I am currently working on designing a stylish menu that expands to display the available options, but I am encountering challenges with the CSS. Specifically, I am struggling to make the sub-menu pop out from the city name seamlessly. CSS ul { margin : 8 ...

htmlcss

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

cssreactjsreact-nativematerial-ui

Arrange the divs alongside one another within a container and ensure that the container adjusts its width to fit the children

I am in need of a container div: This div should adjust its width based on the content within. I would like the child elements to align horizontally. The container itself should form a single horizontal line. I prefer not to use flex because it tends to ...

cssreactjs

Come up with various transition animations for multiple child elements that activate when the cursor hovers over the parent element

I have a CSS & HTML code snippet that looks like this: .item-video-kami { width: 480px; overflow: hidden; position: relative; } .item-video-kami>.play-icon.full-height>svg { width: 106px; color: #ffffff50; } .item-video-kami img { ...

htmlcss

Does anyone have any insights into the technology that powers Twiddla's browsing features?

After some observation, I came to understand that simply inserting <iframe src=remote-page-here></iframe> will not work as expected. Interestingly, the website twiddla does not use flash either. I am intrigued by how they achieve the in-place b ...

javascripthtml

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

javascriptjqueryhtmlajax

Styling paragraph elements using CSS in JavaScript

I need help applying CSS styling to a paragraph that is being extracted using JavaScript. Here's the current code I have: var info = "<p>" + meeting.summary + "</p>; I attempted to add some styling with the following cod ...

javascripthtmlcss

Ensuring radio button validation using parsley.js

I am attempting to validate radio buttons using parsley.js. Below is the code snippet I am working with: <p id="registration_field_custom2" class="onefield registration_field_custom2"> <span class="doyou"> <span class="text">etc et ...

jqueryhtmlvalidationparsley.js

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Exploring the power of internal linking with GatsbyJS

I am currently developing a website using gatsbyjs. I have concerns about the crawlability of "onClick" for SEO purposes and I would appreciate some assistance. This is my current code: render={data => ( <div className='feed'> ...

javascripthtmlreactjsgatsby

While the data from Angular $resource can be viewed, it is not accessible in the code

As a newcomer to Angular, I'm facing a frustrating issue that I need help with. My $resource is fetching data from the server in key/value pairs like detail.name and detail.email. While I can access this data using {{detail.name}} in the view, I&apo ...

javascriptphphtmlangularjsgoogle-maps

The button styled with CSS is failing to display the background image in Internet Explorer 6

I am working on updating a legacy web application that is specifically targeted for IE 6. Currently, I am re-skinning the interface and replacing the default browser button look with a blue button image. While my HTML and CSS code works perfectly in IE 8, ...

htmlcssbuttoninternet-explorer-6background-image

Create a regular expression that permits a sequence of numbers (either integer or decimal) arranged in groups of up to five, with each

Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...

javascripthtmlregex

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

htmlcsstwitter-bootstrapcss-selectors

What is the best way to make the Bootstrap navbar stay fixed at the top of the

I am currently experiencing an issue with the Bootstrap navbar while using version 5.0. Whenever the Bootstrap navbar expands, the content below it also moves down, which is not the desired behavior. I want the content to remain in place. I tried set ...

htmlcsstwitter-bootstrapbootstrap-5

Is it normal not to see </head> and <body> tags in the page source code?

Looking at the source code of the page, you'll find something like this: <link rel="stylesheet" href="http://..."> <!-- analytics --> <script> ... Make sure the closing </head> tag and the opening <body> tag are positio ...

html

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

javascriptcsscss-transitions

Creating a full-width Bootstrap layout with dual backgrounds and a two-column structure

Explaining this concept is quite difficult, which is why I haven't been able to find an answer on Google. I am currently using Bootstrap 3 and I am trying to create a layout with a full width background image, along with two transparent color backgro ...

htmlcsstwitter-bootstrap