Question 201969 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to literally draw a line with a bullet in CSS

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
enter image description here

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 ?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search