Attempting to visually create a line using a bullet in CSS

I found a beautifully designed CSS header title on another website that I fell in love with. I want to replicate the same look, but without using CSS tables like they do on that website.

Here is an image of what I am aiming for: https://i.sstatic.net/qeoS7.jpg

The original design uses tables with vertical-align middle and an SVG image of a bullet point. I want to recreate the same effect using only HTML and CSS, without relying on tables.

This is my attempt so far:

.test::before {
  display: inline-block;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  content: "●";
}
.test {
  display: inline-block;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
.test::after {
  display: inline-block;
  background-color: #000;
  width: 100%;
  height: 1px;
  line-height: 1px;
  content: "";
}
<div class="test">Test</div>

You can view this codepen here: https://codepen.io/familias/pen/MWzEWPm

The line does not stretch to 100% width as intended, and the inline-block property doesn't seem to be working correctly either.

What is the most efficient and concise way (with the shortest code) to achieve this desired effect?

htmlcss

Answer №1

A straightforward approach is to utilize display:flex and align the elements vertically using align-items: center

.example::before {
  display: inline-block;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  content: "●";
}
.example {
  display: flex;
  align-items: center;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
.example::after {
  display: inline-block;
  background-color: #000;
  width: 100%;
  height: 1px;
  line-height: 1px;
  content: "";
}
<div class="example">Example</div>

Answer №2

.header {
  display: flex;
  align-items: center;
}

.bullet, .title {
  font-size: 40px;
  font-weight: bold;
  padding-right: 10px;
}

.line {
  flex-grow: 1;
  border-top: 4px solid black; /* adjust as necessary */
  max-width: 50%;
}
<div class="header">
  <div class="bullet">●</div>
  <div class="title">WEATHER</div>
  <div class="line"></div>
</div>

Answer №3

The primary issue with your line being too short is due to the fact that when you set 100%, it represents 100% of the parent element's length. One effective solution is to utilize z-index: -1;. To enhance readability, I included &nbsp in the text for improved spacing.

.test::before {
  display: inline-block;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  content: "●";
}

.test {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  background: white;
}

.test::after {
  position: absolute;
  left: 0;
  z-index: -1;
  background-color: #000;
  width: calc(100vw - 20px);
  height: 1px;
  content: "";
}
<div class="test">&nbspTest&nbsp</div>

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

Avoid placing content before a link to ensure better focus

I came across some CSS code that closely resembles the following code. (I copied it from http://jsfiddle.net/LmvgM/8/ thanks @thirtydot). I noticed that when the link is focused, the :before content is included. Is there a way to remove it from the highli ...

css

What is the process for dividing a single row into multiple columns?

Is it possible to split a single row into multiple columns in HTML? | Category | Values | | A | 1 | | B | 2 | | C | 3 | | D | ...

htmlasp.net

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

Generate a unique HTML table for each row retrieved from a MySQL database with PHP

Is there a way to display each row from the database table as a separate HTML table? Instead of having one table for the entire database, I want each row to be displayed in its own table. How can this be achieved? Would it be advisable to use the integer ...

phphtmlmysql

Arrange text boxes within a form and table to be in alignment with the labels

https://i.stack.imgur.com/MFQnD.png I'm facing difficulty aligning checkboxes with labels within a form and a table. Despite reviewing various answers and websites, I am still unable to achieve the desired alignment. How to consistently align check ...

htmlcsscheckboxlabel

What is the correct way to adjust the style.top attribute of an element using JavaScript?

In order to correct a JavaScript source code, I need to adjust the style.top property of a div element based on an integer parameter from a function called index. Here is the current implementation: div.style.top = (index * 22 + 2)+"px"; However, for lar ...

javascriptcss

Executing Jquery code inside a PHP function

I am facing an issue with a form on my website where the form entries are not clearing when the submission message is displayed. I believe using Jquery to hide the form entries upon submission would solve this problem. The form in question has the ID of ...

javascriptphpjqueryhtmlforms

"Customize your map pins on Google Maps by updating the marker location through a

I am trying to update the position of a map marker based on a dropdown selection. Upon changing the dropdown option, I retrieve the latitude and longitude values and want to set these coordinates for my current marker. Here is the code snippet: $("#locati ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Is it possible to have a GIF start playing when hovered over and automatically pause when the mouse is moved away?

Is there a method to create a GIF with specific functions? Beginning in a paused state on the page; Playing only when hovering over it; Stopping at the exact frame where the mouse leaves the image. Can these features be achieved without relying on JavaS ...

htmlcsshovergifplayback

Grid numbering with CSS in jQuery mobile design

Looking to create a numbered grid where the user inputs a number and the grid is generated. I am considering using CSS, HTML, or Jquery Mobile for an iPad project. I'm unsure of the best approach at the moment. I would like the grid and numbers to aut ...

csshtmljquery-mobilegrid

The issue lies in the fact that the customization of the Ant Design theme is not being properly implemented

I'm in the process of customizing the antd theme in conjunction with next.js. After researching online, I came across a helpful example and implemented the setup like so: // package.json "dependencies": { "@ant-design/icons&quo ...

cssreactjsnext.jsantdstyled-components

Are Django form widgets like datepicker and tabindex being snubbed?

I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model ...

jquerycssdjangodjango-forms

Enabling or disabling select input based on the selected option in a previous select dropdown

My goal here is to customize a select input with 3 options: Sale, Rent, Wanted. Based on the selection, I want to display one of three other select inputs. For example, if "Sale" is chosen, show the property sale input and hide the others. However, when su ...

javascriptphpjqueryhtml

Executing a click event on an HTML table dynamically created from an AJAX request

I have a script that creates an html table displaying Users of the application, with options to either EDIT or DEACTIVATE each user. These actions are handled using AJAX. The table structure is as follows: <tr><td><a id='edit_link&apo ...

jqueryhtmlajax

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

javascripthtmlcssangulartypescript

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

Learn how to retrieve the ID of an element with a simple click using PHP, jQuery, AJAX, and Javascript

Apologies for being a newbie in this field, but I'm eager to learn. Any assistance would be greatly appreciated. In my project, there is a sidebar with rss links that I want to incorporate ajax functionality into. So, whenever a user clicks on a link ...

javascriptphpjqueryhtmlrss

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6