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:

And this is the desired new look for the block:

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

Set a maximum height for the <td> element within a table, regardless of the length of the text in neighboring cells

Here is the situation I'm dealing with: In the thread, the postbit (blue box with avatar inside) looks fine for most posts (the first three). However, the fourth postbit is vertically elongated due to longer post content. I have been trying differe ...

htmlhtml-tablerowmybb

Can Angular Flex support multiple sticky columns at once?

I am trying to make the information columns in my angular material table stay sticky on the left side. I have attempted to use the "sticky" tag on each column, but it did not work as expected. <table mat-table [dataSource]="dataSource" matSort class= ...

htmlcssangularangular-materialangular-flex-layout

Employing the power of JavaScript to enable the seamless toggle of an overlay

I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...

javascriptjqueryhtmlcss

"Utilizing images within an iframe: A step-by-step guide

I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image. .phone { display: block; position: r ...

htmlcss

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

Minimize the styling of the input placeholder CSS

Here is the CSS I am using: #login-box ::-webkit-input-placeholder { color: #666; } #login-box :-moz-placeholder { color: #666; } #login-box ::-moz-placeholder { color: #666; } #login-box :-ms-input-placeholder { color: #666; } I attem ...

css

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss

The functionality of an AJAX poll is not functioning properly due to issues with the PHP

I am embarking on my first website and project, hoping to see it through to completion. In my room, I have a modest site set up on a Raspberry Pi 2. Users visit this site to cast their votes of 'yes' or 'no'. However, there seems to be ...

phphtmlajax

Postpone the inclusion of html files within ng-include in AngularJS

I need to optimize the startup performance of my app by delaying the loading of a series of HTML files that are being included into my main controller. These files are not needed for at least 4 seconds while one specific HTML file processes. How can I de ...

javascripthtmlangularjsangularjs-ng-include

The auto-play feature fails to function on iPhone devices when using Reactjs

I am currently working with Reactjs and Nextjs. I have a video on my website that is functioning properly on Android phones but not on iPhones. How can I resolve this issue? I have attempted the following code: <video loop autoplay='' muted> ...

javascripthtmlreactjsiphonenext.js

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

htmlcssangularangular-material2

Generate a structured table display using the JSON information

How can I convert the following JSON data into a tabular view? {"data_report":[{"data":[1,2,0,3],"label":"Test1","backgroundColor":"blue"}, {"data":[3,4,2,5],"label":"test2","backgroundColor":"#a3eaae"}, {"data":[2,3,1,4],"label":" ...

javascripthtmljson

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

javascripthtmlangularjstwitter-bootstrap

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Is there a way to automatedly extract CSS class definitions from Chrome Developer Tools? I want to retrieve the styles defined in a specific class name, similar to how it is displayed in the Styles tab on the right-hand side. I know about the getComputedS ...

javascriptcssgoogle-chrome-devtools

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

javascripthtmlcss

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

How can you trigger an event when a table cell is selected and a key is pressed?

In my project, I have some td elements with a class name assigned to them. My goal is to trigger a pop-up window when one of these td elements is in focus and the F9 key is pressed. Here's what I've attempted so far: $(document.body).keypress(fu ...

javascriptjqueryhtml