I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet:
https://jsfiddle.net/romariokbn/2gm27rv6/
<ul class="how-can-i-do">
<li>
<span>Price</span>
<span>15 000 Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000 Р</span>
</li>
</ul>
However, I am encountering an issue when there are spaces in the text on the right side of the prices.
Utilized the white-space: nowrap; property for styling
ul.how-can-i-do-that-bitch li span + spanul.how-can-i-do-that-bitch {
padding: 0;
width: 293px;
margin: 0 auto;
margin-top: 20px;
line-height: 30px;
}
ul.how-can-i-do-that-bitch li {
display: table;
}
ul.how-can-i-do-that-bitch li span {
display: table-cell;
color: #1e1e1e;
}
ul.how-can-i-do-that-bitch li span:first-child {
position: relative;
font-size: 15px;
color: #949494;
overflow: hidden ;
}
ul.how-can-i-do-that-bitch li span:first-child:after{
content: "";
position: absolute;
bottom: 0.5em;
margin-left: 0.5em ;
width: 100%;
border-bottom: 1px dashed red ;
}
ul.how-can-i-do-that-bitch li span + span {
text-align: right;
width: 1% ; /* Trick it */
vertical-align: bottom ; /* Keep Price text bottom-aligned */
padding-left: 0.5em ;
white-space: nowrap;
}<ul class="how-can-i-do-that-bitch">
<li>
<span>Price</span>
<span>15000Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000Р</span>
</li>
</ul>
<ul class="how-can-i-do-that-bitch">
<li>
<span>Price</span>
<span>15 000 Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000 Р</span>
</li>
</ul>I am trying to achieve a layout similar to the one shown in the image. A container can have multiple elements starting within it or no elements at all. The elements always have a fixed height, and the container's height is determined by the number of ...
Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...
Despite previous inquiries on this matter, none of the answers provided have been helpful to me. Therefore, I am addressing the issue again... I am currently developing the frontend of a website that does not involve any backend functionality (no server c ...
Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...
I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...
According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...
I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...
Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...
When experiencing delay in image loading time, I need to display a spinner until the image loads completely. What is the best way to achieve this on the Angular 2 platform? <div id='panId' class="container-fluid" > This section ...
After using the following code, my footer stays at the bottom of my page: In my vue project, #app serves as the container for my content and footer. #app { min-height: 100%; position: relative; } .footer { position: absolute; bottom: 0; width: ...
When I embed the following script in my HTML, the output doesn't have any styling. How can I style the script output to blend well with the existing HTML structure? I tried accessing the output by ID, but couldn't figure it out. <script> ...
I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...
Currently using Bootstrap v4 with a two-column layout that splits the container in half. On larger screens, the items in each column display correctly. However, on smaller screens, Bootstrap shuffles the items from column 2 into column 1. I am looking to ...
Hey there! I've come across this error in the console while attempting to utilize Bootstrap. It seems that a style is being refused from 'http://127.0.0.1:5500/node_modules/font-awesome/css/font-awesome.min.css' due to its MIME type ('t ...
I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...
Chief complaint: The element cannot be located using CSS Selector Custom Css path: html.ng-scope body.ng-scope div.snap-content div.content-container div.ng-scope div.content-box div div.cb-landing-module div.deposit-acct-box div.dropdown div.dd-field ...
How can I invoke a function in Angular using inner HTML? I attempted the following: cellTemplateFunc(cellElement, cellInfo){ var subContainer = document.createElement('div'); subContainer.innerHTML = "<a href='javascript:v ...
This is the standard format of the page: * { margin: 0; padding: 0; } img { width: 100%; float: left; } #grid { display: grid; grid-template-columns: repeat(3, 1fr); } #test-one { grid-column-start: 1; grid-column-end: 2; width: 100 ...
I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...
Whenever I try to select an option in my select box, a dotted rectangle appears. How do I remove this feature? https://i.sstatic.net/BzsL2.png I have noticed that many others are also facing the same issue. I tried updating my CSS with some properties ba ...