What is the best way to make a line widget that has rounded edges at both the beginning and end?

I've been scouring the internet for a solution to this problem, but so far I haven't had any luck.

My goal is to design a horizontal line with dots at each end, similar to this example.

Does anyone know how I can achieve this using CSS?

I attempted to create something myself, but I didn't get very far. Here's my code:

.VecBox {
  background: #FFFFFF;
  mix-blend-mode: normal;
  box-shadow: 0px -3px 15px 5px rgba(65, 65, 65, 0.07);
  border-radius: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 20px;
}

.pickDate {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  font-variant: small-caps;
  color: #2F312F;
}

.pickTm {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  font-variant: small-caps;
  color: #2F312F;
}
<div class="VecBox">
  <div class="row">
    <div class="col-6 w-100 text-left LocationAB pl-5">chembumukku</div>
    <div class="col-6 w-100 text-right LocationAB pr-5">alappuzha</div>
  </div>
</div>

<div class="VecBox mt-4">
  <div class="row">
    <div class="col-6">
      <div class="w-100 pl-2 pickDate text-left">07 December 2021</div>
      <div class="w-100 pl-2 pickTm mt-2 text-left">04 : 15 PM</div>
    </div>
    <div class="col-6">
      <div class="w-100 pr-2 pickDate text-right">07 December 2021</div>
      <div class="w-100 pr-2 pickTm mt-2 text-right">04 : 15 PM</div>
    </div>
    <div class="col-12 text-center pickDis">
      2 days and 22 hours
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

To create a decorative line, consider using the <hr> element (Horizontal Rule) and enhancing it with pseudo elements for circular markers at both ends. Pseudo-elements are a useful technique for applying styles before or after an element without the need for extra markup. They can be utilized to:

  • Style the initial letter or line of an element.
  • Insert additional content before or after the existing content within an element

For a detailed explanation and examples of ::before and ::after pseudo elements, visit W3 schools explanation

hr {
  width: 50%;
  border: dotted red 1px;
}

hr::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  left: 25%;
  margin-top: -5px;
}

hr::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  right: 25%;
  margin-top: -5px;
}

div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  right: 50%;
  margin-top: 4px;
  outline: solid red 1px;
  outline-offset: 5px;
}

* {
  box-sizing: border-box;
}
<br>
<div></div>
<hr>

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

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

htmlangulartypescriptrestangular-material

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs

Are you searching for the origin of a dynamic dropdown widget or database?

Currently, I am browsing through and I have a query regarding accessing all available classes/options for the courses in a semester. There is a class locator on the top left of the page with a dynamic drop-down menu. Can anyone suggest how I can access ...

javascripthtmldatabase

Displaying outcomes in dialog box when button is pressed

I am working on a website where I want to enhance the user experience by displaying output in a dialogue box upon click. The current setup involves the user selecting a vendor and time duration, with the results appearing below the Submit button. However, ...

javascripthtmlcssdjango

What is the most effective method for converting this flash application into a format that is compatible with

I have a unique flash animation that I want to make compatible with iPhones by integrating it into an iPhone app. Unfortunately, I cannot provide a direct link to the animation, but you can view a screenshot of the interface here. This interactive animat ...

iphoneioshtmlflashcanvas

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

htmlcsssvg

Is there a way to center the text at 0% using text-align in Bootstrap?

My progress bar, designed with Bootstrap, currently displays the text in a way that is not centered as desired. The issue I am experiencing is that the "0/0" text shifts to the left and using text-align: center; does not seem to resolve this alignment pro ...

htmlcsstwitter-bootstrap

Keep duplicating a single object until it fills up the entire screen

Is there a way to make an HTML/CSS element repeat until it covers the entire screen height, without repeating it indefinitely? #container{ height: 100vh; width: 100vw; } .dotts{ background-color: yellow; border-radius: 50%; height: 20px; width: 20p ...

javascriptjqueryhtmlcss

Ways to adjust the dimensions of a textarea based on character count

When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...

htmlcsstextarea

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

javascriptcssdom

Is there a way to generate bootstrap divs by parsing csv text?

As I am working on a Bootstrap 3 image gallery, I have noticed that there are multiple recurring divs with a similar structure as shown below: <figure class="col-1 picture-item" data-groups='["groupA"]' data-date-created="2018" data-title=" ...

javascriptphpjqueryhtmltwitter-bootstrap-3

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

I want to implement jQuery validation for a textarea field, with a requirement of 250 minimum words and 1000 maximum words. Additionally, I need to display the word count in a span tag next to the text area. How can I ensure that this validation works even ...

javascriptjqueryhtmlvalidation

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

Adjust SVG size to fit parent container/division

I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is paddin ...

htmlcsssvg

Creating a sleek CSS drop-down navigation menu

I seem to be facing an issue with the side navigation drop down menu. Below are the link and CSS code: <nav id="nav"> <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-it ...

cssnavigation

Customize your MUI Select to show the selected value in a different way within the Input field

I have a collection of objects and I am looking to link multiple attributes of the object in MenuItem, but I only want one attribute to be displayed in Select https://i.sstatic.net/kDKLr.png The image above displays "10-xyz" in the select display, when i ...

javascripthtmlreactjsmaterial-ui

Whenever I attempt to execute my .html and .js files, I encounter the error message: "Uncaught SyntaxError: Unexpected token <"

Just starting out in react.js, I decided to include CDN links to compile some basic react.js code into my html. Unfortunately, I encountered this error: "Uncaught SyntaxError: Unexpected token <" I did some research and found a suggestion to add: t ...

htmlreactjsjsx

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations