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

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts: Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googlea ...

javascripthtmlcsscontent-security-policy

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

javascripthtmlangularjs

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

javascripthtml

JavaScript detecting improper XHTML syntax

Is there an effective method to detect malformed XHTML within a string using JavaScript? Given that my page allows user-generated XHTML (from trusted users) to be inserted into the DOM, I aim to identify unclosed or overly closed tags. If found, I intend ...

javascripthtmlregexxhtmltags

The Jquery .remove() function will only take effect after the second click

I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...

javascriptjquerycsstwitter-bootstrappopover

"The JQuery .validate method is not compatible with this property or method" - error message displayed

I seem to be facing a problem that I can't seem to solve. I keep getting an error message that says "Object doesn't support this property or method" while using jquery-1.10.4. The .validate method is not functioning properly for me. Any assistanc ...

javascriptphpjqueryhtml

Enable access to the child of Lages and apply CSS to disable it

My current code looks something like this: <label for="billing:postcode" class="required"><em>*</em>Zip/Postal Code</label> I am looking to hide the <em> element from displaying using CSS. How can I achieve this with the dis ...

htmlcssparent-child

Beautiful Web Address Exclusively for .html Files

The other day I experimented with converting my html pages into clean urls using some [.htaccess] code: RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.html [NC,L] While this successfully worked for my html pages, it c ...

phphtml.htaccesspretty-urls

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

I just need the text to be made clickable instead of the entire list item block. <a class="menu_head">Hello</a> <ul class="menu_body"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2 ...

htmlcss

What is the best way to distinguish the Footer from the Content?

While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. ...

htmlcss

Using jQuery to toggle between multiple divs, turning one on while turning off the others

Hey there, I'm currently brainstorming ways to utilize an accordion widget in a unique way. Specifically, I want each h3 trigger to reveal a different div when selected, hiding the previous one in a seamless manner. Picture this - A sleek three ...

jquerytogglehtmlshow-hideslidetoggle

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

javascripthtmljquerycssshow-hide

Retrieve numerical data from the element and enclose it within a span tag

My goal was to indent a number, but the HTML generated from my CMS is making it difficult to target the number and apply a specific style. <div class="content"> <b>01. Header</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

jquerycsstexttextnode

Concealing a Parent Container Using jQuery

I've been attempting to hide a certain div with a value of 9, but my current method doesn't seem to be working... The Hide Function I'm Using: <script> $('.hhpt-housebox').each(function() { if($(this).val() < 9 ...

htmljquery

Get information from one div and implement it in a different div

I am working on an application that creates div boxes dynamically and loads images through AJAX to place inside these boxes. To avoid unnecessary loading, I want to check if a box already exists before loading images. If it does exist, then I would like t ...

jqueryajaxdomhtml

Is there a way to extract shared properties within a Material UI style declaration?

I am working with a specific set of style rules that define different statuses: status_in_progress: { fontSize: 14, backgroundColor: theme.palette.success.dark, padding: 2, paddingLeft: 5, paddingRight: 5, display: "inline-bl ...

cssreactjsmaterial-ui

bringing in a js file with an import statement at the beginning

I am looking to import a file that brings in another file for use across multiple pages Here is my folder structure: js modules momentum-scrolling index.js about.js contact.js Contents of momentum-scrolling.js: import LocomotiveScroll from &a ...

javascripthtmlcssfrontend

Issue with dragging and styling windows in Safari on iOS

When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page. However, when visiting other websites, no ...

htmlcssios

Issue: Animation not triggered on exit by React-transition-group Transition

I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect. The desired effect is for the icons to spin both on enter and exit, although there may ...

cssreactjsanimationreact-transition-group