Trying to literally draw a line with a bullet in CSS

Question

I am in love with a css header title from another website, so I am trying to achieve the same but without css tables like they do on this website.

Here is a picture of what I am looking to achieve

The original is using tables with vertical-align middle and an svg image of the bullet. I want to make it look the same but without tables and with pure css and html

Here is what I have

.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>

As you can see in this codepen https://codepen.io/familias/pen/MWzEWPm

The line is not working to 100% width, and the inline-block does not seems to work neither.

What is the best and simplest way (shortest code) too achieve this ?

Does this answer your question? [CSS technique for a horizontal line with words in the middle](https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) — kmoser, Jul 06 '23 at 15:17
Just use [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) — Sfili_81, Jul 06 '23 at 15:21
I tried to replicate your image. Please check my solution and let me know. — suraj sharma, Jul 06 '23 at 15:36
Flex in the answers was the best option because it uses less code to do the same and without containers — Kamikaza, Jul 06 '23 at 15:58

score 3 · Accepted Answer · answered Jul 06 '23 at 15:18

The simplest solution. Use display:flex and align the elements vertically with align-items: center

.test::before {
  display: inline-block;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  content: "●";
}
.test {
  display: flex;
  align-items: center;
  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>

This was the shortest code and it is working just perfect. Thank you very much — Kamikaza, Jul 06 '23 at 15:56

suraj sharma · Answer 2 · 2023-07-06T15:34:03.783

1

.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 needed */
  max-width: 50%;
}

<div class="header">
  <div class="bullet">●</div>
  <div class="title">WEATHER</div>
  <div class="line"></div>
</div>

edited Jul 06 '23 at 15:34

answered Jul 06 '23 at 15:27

suraj sharma

415
4
14

Avarage cat enjoyer · Answer 3 · 2023-07-06T15:31:19.910

The reason that your line is too short is because 100% is 100% of its parent's length. Something like this using z-index: -1; works. Inserted &nbsp in the text for nicer 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>

Trying to literally draw a line with a bullet in CSS

3 Answers3