style a disc inside of the span inside of the p element

I have a very strange requirement, where in I have to display a list-style disc inside of a which resides inside a p tag. Since Even though span is an inline level element, think because of the nature of p tag, the list renders in the second line. I want to have the text in both span and p to render in a single line. Here is a screenshot for your reference

enter image description here

As you can see after the (Central Time Zone) text, I want the disc and the text Monday-Friday render in the same line. I am not able to find how to figure this. Thanks a lot for help in advance. Here is what I have tried so far.

.body-text-info {
  font-family: Nexa W01 XBold !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.center-text-details {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #77777A !important;
}

.bullet-disc {
  list-style: disc outside none !important;
  display: list-item;
}
<section id="extra-info">
  <div class="container">
    <p class="center-text-details">8:00am - 5:00pm (Central Time Zone) <span class="bullet-disc"> Monday - Friday </span></p>
  </div>
</section>

Answers 1

  • Add text-indent to the bullet-disc class, and then add the bullet style using the :before css tag

    .body-text-info {
      font-family: Nexa W01 XBold !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      color: #000 !important;
    }
    
    .center-text-details {
      font-family: Helvetica Neue LT Pro Roman !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      color: #77777A !important;
    }
    
    .bullet-disc {
      display: block;
      text-indent: 35px;
      position: relative;
    }
    .bullet-disc:before{
      content: '?';
      position: absolute;
      left: -15px;
      top: 0;
    }
    <section id="extra-info">
      <div class="container">
        <p class="center-text-details">8:00am - 5:00pm (Central Time Zone) <span class="bullet-disc"> Monday - Friday </span></p>
      </div>
    </section>


Related Articles