Insert a horizontal line within the text

I am struggling to get the horizontal lines to work on my traffic light dashboard view for one of my website pages. Despite making multiple adjustments, it seems like I just can't get them to display correctly.

Here is an example of what I want: View Sample

And here is a fiddle showing what I currently have: https://jsfiddle.net/gunnersfan/dx19y3f4/

CSS:

.bubble {
  height: 30px;
  width: 30px;
  color: white;
  display: inline-block;
  text-align: center;
  vertical-align: center;
  border-radius: 50%;
  margin-right: 50px;
  margin-left: 50px;
  font-size: 90%;
}
.red-bg {
  background: red;
}
.green-bg {
  background: green;
}
.blue-bg {
  background: blue;
}

.inline-div {
  display: inline;
  font-size: 75%;
  font-family: verdana;
  margin-left: 50px;
  margin-right: 50px;
}
htmlcss

Answer №1

I have created this special project just for you: JsFiddle

.bubbles .line {
  position: absolute;
  top: 50%;
  left: 50px;
  right: 50px;
  border-top: 1px solid black;
  z-index: -1;
}

Answer №2

Have you considered using HTML Canvas instead of CSS? If you prefer to use CSS, here's a concise way to achieve the same effect:

.shape1 {
  height: 1px;
  width: 104px;
  border-bottom: 1px solid ;
  border-right: 1px solid ;
  margin-left: 80px;
  margin-right: 80px;
  margin-top: 15px;
  position:absolute;
}
.shape2 {
  height: 1px;
  width: 104px;
  border-bottom: 1px solid ;
  border-right: 1px solid ;
  margin-left: 214px;
  margin-right: 80px;
  margin-top: 15px;
  position:absolute;
}

<body>
    <div>
        <div class="inline-div">
          Title One
        </div>
        <div class="inline-div">
          Title Two
        </div>
        <div class="inline-div">
          Title Three
        </div>

    </div>
    <div>
  <div class="shape1"></div>
   <div class="shape2"></div>
        <div class="bubble red-bg">
        10
        </div>
        <div class="bubble green-bg">
        94
        </div>

        <div class="bubble blue-bg">
        123
        </div>

    </div>
</body>

Answer №3

To achieve this effect, you can utilize the power of styling with the `:before` pseudo-element.

Simply assign a class to the container div that holds your bubble elements, such as `'container-bubbles'`, and apply the following CSS rules:

.container-bubbles {
  position: relative;
}

.container-bubbles:before {
  position: absolute;
  top: 50%;
  left: 50px;
  height: 1px;
  width: 290px;
  background: black;
  content: '';
  z-index: -1;
}

Check out this example on JSFiddle!

Answer №4

By including position: relative in the .bubble class, you can achieve the line effect using the following code:

.bubble:not(:nth-last-of-type(1)):before {
    display: block;
    content: '';
    width: 140px;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    background-color: #000;
    z-index: -1;
}

This code appends a :before pseudo-element to every .bubble except the last one.

The advantage of this method is that it eliminates the need for extra markup. You can see a live example on JsFiddle.

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

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

csstwitter-bootstrapicons

Error on JSP Hello Page

As a novice in JSP, I am attempting to create a simple JSP page where I can set my class fields for name and surname and display them on the page. Below is my Java class: package org.mypackage.person; /** * * @author cemalinanc */ public class Person ...

javahtmlformsjspjakarta-ee

Accordion symbol for adding or subtracting

Looking for a way to change the Toggle text in my angular 7 application accordion to images or content displaying a + sign for collapse and - for expand. I need to achieve this using CSS in my SCSS stylesheet so that I can later change the color of the sig ...

htmlcssangularsass

There is an issue with the navigation keys not functioning correctly within the cellrenderer input boxes in ag grid

Struggling with an autocomplete input box within the cell renderer component in an ag grid cell. When attempting to use the left/right navigation keys, the input does not move inside the box and instead exits the cell abruptly. Similarly, navigating down ...

htmlcssangularag-grid

What is the simplest way to shift an icon to the right in the header of an Expansion panel using Vuetify

After implementing the template from this example: https://vuetifyjs.com/en/components/expansion-panels/#usage I am facing an issue where the header icon is stuck to the title Even applying "float: right;" does not seem to resolve it Has anyone els ...

cssvue.jsvuetify.js

The Alchemy feature on hover is not functioning

I am currently using alchemy.js to display a graph, but I am encountering issues with showing the "onMouseOver" caption of the graph's node. The console is displaying some errors which you can see here. Here is the code snippet: <html> < ...

javascripthtmljsononmouseoveralchemy

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

javascriptjqueryhtmlcss

Modify the input based on the chosen option operation

I am working on a project where I have 3 select elements and when a user selects an option, the associated value should be displayed in an input field. I am trying to use a single function for these 3 selects, but I am facing some issues. Here is the HTML ...

javascriptjqueryhtml

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

When I select different product categories, only the items from the active category are displayed. When I click on another nav-item, the previously displayed items remain unchanged and I'm unable to change the class "show active" in the tab-panes. Co ...

phphtmlcodeigniterbootstrap-4nav-pills

Struggling to Position Advertisement in CSS

I've been struggling to properly center a div using CSS. Adding text-align: center; doesn't seem to do the trick. The issue can be found in the top advert on this website: . Do you have any suggestions? Here's some sample code: HTML: &l ...

htmlcssalignment

What are some ways to address the performance challenges associated with resizing images for responsive design?

When it comes to certain images, I find that scaling them based on the page size is the best way to make them responsive. <img class="img_scale" src="img.png" alt"this img doesn't have width and height definition"> In my CSS: .img_scale{wid ...

htmlcssimageperformance

Storing div content in database directly

I have a straightforward div that allows users to edit content on the page. I need to save this content in a database, but without including any HTML tags while still preserving line breaks. Currently, I am using the innerText property for this purpose. N ...

javascriptphphtmldatabasecontenteditable

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

<button class="btn" onClick="$('#firstModal').modal('show');">Click Here</button> <!-- Modal --> <div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden=" ...

jquerycsstwitter-bootstrapmodal-dialog

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility. Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slid ...

javascripthtmlcssswiper.js

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

javascripthtmlcsstypescriptsaas

Place the image in the middle of a div

Struggling to horizontally center an image in a div, but for some reason it's just not working. I've centered images many times before, so why is it different this time? Here's what I've attempted... CSS #cabeca{ position: relative; f ...

htmlcssimagecenter

Learn how to create a PHP activity feed that functions like Facebook, and discover the best methods for converting JSON responses into HTML

We are currently working on a website that functions similarly to Facebook, specifically focusing on the activity feed. To load the user's activity feed, we use AJAX to send a request to a PHP file which then processes the logic and returns the values ...

phpfacebookjsonhtmlfeed

Investigating the variety of HTTP 206 responses pertaining to video content

Currently, I am utilizing Amazon CloudFront to serve HTML5 videos. These videos are being requested through HTTP range requests and the expected responses are often in the form of HTTP 206 Partial Content. I have a requirement where I want to log the requ ...

javascripthtmlhttpamazon-cloudfront

Press the button using the spacebar

I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...

javascripthtml

- "Queries about Javascript answered with a drop-down twist

Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong? Appreciate your help! CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { height:0; o ...

javascripthtmlcssdrop-down-menu