Adding dashes as padding in HTML/CSS

I am currently working on updating the user management block on my website and I want to showcase it with some visual examples.
I believe that using images is the most effective way to demonstrate changes.
This is the current appearance of the block:

https://i.sstatic.net/lVGgW.png

And this is the desired new look for the block:

https://i.sstatic.net/btpbC.png

Would appreciate any suggestions on how to achieve this. I manually added the dashes, but I am looking for a more responsive solution.

Below is the code for the block:

<div class="account-box">
Welcome, guest.<br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged in as [username] <span style="text-align: right;"><a href="/logout" class="btn btn-xs btn-danger"><span class="fa fa-sign-out fa-fw"></span>Logout</a></span>
</div>

htmlcss

Answer №1

I recently had a similar task to tackle and this is what I devised:

.box {
  display: flex;
  align-items: center;
}
.box>.divider {
  flex-grow: 1;
  border-top: 1px dashed currentColor;
  margin: 7px;
}
<div class="box">
  Label:
  <ins class="divider"></ins>
  Value
</div>

Feel free to customize as per your requirements!

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

Comparing the Distinctions of jQuery Post and HTML Form Post

After researching extensively, I am still confused about the difference between a Jquery $.post method and submitting an HTML form using post. Here is my code for the jQuery implementation: $.post( "/test", query , function( data ) { console.log(data) ...

jqueryhtmlnode.jsexpress

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Why won't the main bar column in Bootstrap extend to the entire width of the page?

https://i.sstatic.net/oh455jA4.pngI've set up a basic row with two child columns: the sidebar column with className='col-md-2' and the mainbar column with className='col-md-10'. The parent row has a display:flex property to positio ...

htmlcssbootstrap-5

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

Utilizing CSS to transform text with a sleek, animated writing effect

I have utilized CSS to create a captivating animation effect where text is written out in a smooth style. I am seeking assistance in replacing the current text with a different one while maintaining the same effect. HTML & CSS .typed-out{ overflow: ...

htmlcssanimationtext

What are the steps to view my HTML webpage on a smartphone?

Recently, I successfully created an HTML webpage with CSS and JS that looks and functions perfectly on my PC. However, when attempting to access it on my phone, I encountered some issues. Despite transferring all the necessary files to my phone, only the ...

javascriptandroidhtmlcss

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

javascripthtmlangulartypescript

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

jquerycss

Is it possible for JQuery to interact with an Access database for both reading and writing

Is it possible to utilize Jquery to establish a link with a Microsoft Access database? I have been exploring this possibility but haven't found any relevant information. This database won't be used for a production site, but rather for a small gr ...

jqueryhtmlms-access-2010

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

Is it possible to create a cross-sectional view of a lens using the HTML5 canvas element?

I am interested in creating a visual representation of the cross section of a lens element. Typically, these elements consist of one or two circular surfaces (front and back) with a rim of arbitrary shape. My goal is to simply connect the front and back su ...

javascripthtmlcanvas

The layout of the keyboard in Cordova has been altered

Just starting out with my first Cordova app and I'm working on a simple login form. The issue I'm facing is that whenever I click on an input element, the keyboard pops up and completely messes up my layout, which should be straightforward. Has ...

javascripthtmlcsscordova

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

having difficulty choosing a single radio button at once

I'm having trouble selecting just one radio button at a time. Instead, multiple buttons are being selected. I'm new to HTML and this is the code I'm using. Can someone please assist me with this issue? <form name="ans_a" onsubmit="return ...

html

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

htmlcss

Troubleshooting problems with encoding in Python Selenium's get_attribute method

Currently, I am utilizing Selenium with Python to crawl the drop-down menu of this particular page. By employing the find_elements_by_css_selector function, I have successfully obtained all the data from the second drop-down menu. However, when attempting ...

pythonhtmlseleniumweb-crawler

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

javascripthtmlcssreactjsnext.js

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

CSS is malfunctioning on IE and Chrome browsers, yet it functions correctly on CodePen when using Chrome

We are experiencing issues with our CSS and HTML not displaying correctly in IE or Chrome. The text is not properly center aligned. Oddly enough, it works fine when viewed through Chrome on CodePen. The text is center aligned there. <html> <hea ...

htmlcssinternet-explorergoogle-chrome