Trying to literally draw a line with a bullet in CSS

July 6, 2023

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 ?

>Solution :

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: "";
}